{"_id":"@material/mwc-snackbar","_rev":"720-a901462a832e0a889d5de1ec18b6f5c2","name":"@material/mwc-snackbar","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.6.0":{"name":"@material/mwc-snackbar","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-snackbar.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.6.0","@material/snackbar":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","_id":"@material/mwc-snackbar@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-KY1tAVnfEUTi3V6siqQGX2DacYsCLJN8K1RK1cDRZLIkMVm93Zc3vmGhqUkEJEwppAjmFHtjVXNVZ4OyX/79Qg==","shasum":"c5ca43c31fc18a03f82211b74571302742e92e08","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.6.0.tgz","fileCount":15,"unpackedSize":267962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAfCRA9TVsSAnZWagAAolUP+gPL8e45pG5os/d27Qp2\nlpcbja1ZBkHqQH5MBKILZTejrS0wdtg6d2qAyu8y8PlljLbS4n5GMcv+G+us\npeSuVTjqYbU3rfWi8BIpUgAN/N1rohCi65+h7VaRfsK+DyIwL58gXxurdIPX\nfLwDlMhjWIvN5WMSWhiv0VFO65i+0HuTd7lueDqNRO0tGoHnBrSmym0FLCxR\npRCD7c6fox+1sw1kGOaT9dCwXZzMqst0dj3VZFmenkYcQKiED9dKUgAmd7jp\nlzKnm0Udgo91EBgQr66PYCzZLyI9uwa6uHIk5VvfJt9cy1fpfn1Zm4s0F9Wn\nofZjcTuJ2NXVFBPdOpq/Fhm5nQ2JEpfgGlNaNj3J6jS2PoqqmrfZM8pub6em\nS88Q96Q5WS1k+xPAcn12YgUcfUEY5Us4kQFrx5eS+L3B7UJquoe73a2LDpLp\n6ZHruzV5I5cZYDlAs5NvpRsSGyzMtTH+ciXrkMuSe0NGmJNZZP1FghIkPr19\nQ+UF9xS3wdtZVYKEBGXaQ3AFNc4ch5/0s7E2KZsEJ0Y/YThGrREAg1ZpKL+Z\nzeu8H0k5UoRN1vMJ6RZewzqkQ3l4a3ecXW1K5gaeQk4NsNspXtF0vDcHoCH7\nOQyKfLqQufNwZZWncVVh9ktNBW48THD9rIr+Pq55/yQXgwlp9XbMkq3vAxfQ\n7VHi\r\n=ruSA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3OS1bCHLpGMWG4T3hzksKJYLveyR6YBFbH1YhCQHO9QIgDAnh1ymj0ysKTDLCQnhEQUEv4LYMV8wTHbZi66CFQSY="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.6.0_1559773214287_0.2772781051591189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-snackbar","version":"0.7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/snackbar":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-/1HiY+WGQuu5i3TjNgPdHbhnr9BYwE7JBIu9gaajm6/tpjZuZdovzZycnHjr3ek2A2vuvdZsZ313G2rw20cLdg==","shasum":"2f231edb10885e130c27c803ba35d4a34e804cc6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.7.0.tgz","fileCount":20,"unpackedSize":78890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9hCRA9TVsSAnZWagAAQS4P/2Mv2edI1TMKm/QTS+l3\niTWtwzoehEinTtdehM8fGwFHUabvQiDBYmNahJxnP6n8r2leqv9Y5CFw2jCh\nJ9/XWYjtx7Ao4O3W4U4iHNzvEgPOew0coLM/JmHNcq4a7jP/ojWM1LPTFFq/\n2gGoIgb5lno5ex3cbM8qc8gQV/QQeAeAy0tb/7TmvLw9fYKlquxjnfjanHgZ\nrRABeW9gAw52dYNKeXGwxkswxotkXMtlkgGJN0UpE8BpZ01VxZG7M0nnFm+K\nKsrGZ2P8B0UxDuhKOzppCxfm5oKq+KyyvaA4ATbPX9d6E/DxVM05kZbe3Q46\nP7TiuigXvK0MFqfzfdT3xnk7hySKDKLanEuCKAXnyT6mpkhFsn49AE+LrYoE\no8bV2sOGycenwjBz/nUyd1x3gXJRlhh4IYdYrryzEyx6+z+ZL+tKiU6c7qRl\nT1/9auZJU0JzBft34ROo8VBZwIiT+8kdK0oLttR8Bb5iZTjzk+M8PlRDWnxL\nXL0S9gXA4ZgzoDYduFRJfa4vxV/wnBQFkC6xAUz1rciin6ZUfVclIK0YZVGD\nJe0UOKBZFdSXefcvYKcw6TuNAg1hUKD9mim+3GK/lCh9U/xBu8qbkRJmGQpx\nJYAOCOODqUtsTLrcSkg3yLW9fdKTy3uAnjdsjg85ogZyuGPYRlRKdqHwk3xD\n8o/2\r\n=mFLK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWdEmQRQdvOJ3R6xeU055iMgbslmACgnCYoUI+7eHjiAiA2YkAobA8qmwU7C4IFjNhWuc9zxacFJ51cJRFr0hj4Sw=="}]},"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-snackbar_0.7.0_1566941024453_0.08063645973069056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-snackbar","version":"0.7.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/snackbar":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-NFEDqT94YQpUSTQdzLxcqX5z9cCu1y2lqQ3MRDdWRwZcHPoV97zrAOiqpDd8ov6RTrpwg2NdW8Au31kqIuBjEg==","shasum":"60ca09331e8e14aa893cdecda6646ec3d1de544e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.7.1.tgz","fileCount":20,"unpackedSize":78872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezeCRA9TVsSAnZWagAAAK4P/28sjJ9C7yvFnNXVQ8WG\nb1T/gZ9eSGg3RTgRxmfgKFxjWJLqBSu49glfkykqyZd7Cj2sKTWlYSqBlmMp\nspUqHPjfKoXeBNlzmqXk5tpr44xk56CuyDQOyvbR0aSSEVKzqSnWe4ltPQLG\neM5SG3i6yZRi+o7BcPs5qzAUZbPinkpSLgNtbgkZaj2WXCaFuhLsQZvCm5bJ\nn5jU8rrejwR48wGKMPQSn7CagOe43Ffauq9qouyaeuFrM3XDP8LPy9BN0DR1\nV77KW6KECmmcoEfa4rbdmyr49Ql/Bz6VWs7rqrkeWjRkkERLTFEwjmFqYiTZ\nun2LsdPdH+MQA6Z1B/m+RSqZdi8dkkqkAsx3VxnK2kp14XbR+BV5h4aE4crl\ngWh7NUJccqnFfBDa8FJ2wlBIDqQyV9nqYBIeSvZSoUvZxMjX8TCzsUtw5Dz/\nESVZMTsHFp/CepNU0vD/S8Weo5xh4aXdcbU0DacbBebWQXJKpe28gO9i0lvj\n+VWsfI8vT7VgvTO5SYcysx3XA5LWkGwBD3TTUGHrSYY0wi/bFK02ugp4ooO3\n7KseCp18u3aNqReR0L5hXk5MFC6TcQZM17DJkamDDagN2RHJN5kI8opWuQs8\naW6AEEremMrD08WEQ0I0phTMb6k5RBI+TEn/R/CUHtzO0pj00bMwH8jPT38B\nT9Gv\r\n=1YqP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP9MKUgm5vAWCmOa/p8vzfHxm3PEnOvx6cipZ7/KIzEgIhALsPWvkVYleg9YeW69ZKoQhZqywA8KM1cpW3aV4otM1w"}]},"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-snackbar_0.7.1_1566960861824_0.3169404220961498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-snackbar","version":"0.8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/snackbar":"^3.0.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-mPnQ4bFsVLpiGsn5X2QX+3NnyA+YCFWOv0ipMbGgs8791gxqEoftMpk5h/rPu/8JdTDQ0zH5h7treW8FXlVZAg==","shasum":"d15a871133db5175b4706bc9a9dd1e7b8c17f81e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.8.0.tgz","fileCount":20,"unpackedSize":77878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+LCRA9TVsSAnZWagAAaIsP/AoLYJxOE7DOX0Lcj/uJ\nRyVTyk6z+Fvg38JrtzzOasgLkCX5ZfwEZXWw5ij3phsrD5estUX4ejG66+iK\nl6YAJnvzc326rkiwH7Cti/Nq3Wy4l/jg1InyFuWTaCbEqSLOoVye19Lu9HcL\n0FwnpzGwNRC1ooQzzstnEMnQHVUk9nX0l/dtlCuXILqmSDHxWj0U0GfDbzi3\nFmDqdQU8OucuvhfD4zigYqCpVBSXBvG/GccO00OTM2KFiZ71GRlQJrAR/dwC\nGVubiGdfs5iFmw5AQ8TBDBlmwdqM3busmUzCcwhO4F2TwHhXdFs7swIj/hL8\nqmqCg8ws3FBcruDI+1w6vcNdL6YtdXx5CaCcxhfmcfmuDCn6Kd7LQ6/cl6uC\nakVkszvLHiUioyj/bfgjJwK0EYkXJG015+2LlMmapZNQik5TOypJybYj7pwu\nSvpdUm6GoT7AllVOtXbK5XBblws1YbC5WOH0zO0P6kAvUcx/Ya3DCDIPIxfI\nLtmaQxUSMXABcmgFKWz6lvfJyB0gqRHTEq55iMwYtKzs4KHFp1DqgsIiY/Et\n4oEcT1tU0bQ1tGWhNhjvX5qyxwf3SJljDz22qYARIy91zzST4e6d1zByHaSy\nqyUat51FZBaUZ6UNjsMFl2TS5CN8sC3lcxnM1KZ5iRGblCMH24UF23jLU9uN\nPuVp\r\n=qN+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyvHmofkeb28lGjgPdvBpdQSSs5bDBIcG4QcXFsQdZPAIhAPhIT3kmXyF09E03KVZFDHBXid/hEF1yj4LakN4CCLkH"}]},"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-snackbar_0.8.0_1567555467260_0.21517947843878749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-snackbar","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/snackbar":"^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-snackbar@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-+FApwKMPmJf7ExbGjn5zCI3ac172qqM5TMBtvH5NqOn/mSc5Q26jIB9SozAbvjAVJdRXuaP6oe/2yuc/h3vGVw==","shasum":"483136d25f1f2cd1175197ebee554b406008e509","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.9.0.tgz","fileCount":20,"unpackedSize":78055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeKCRA9TVsSAnZWagAAsfIP/020OFkK11zRm9JHPRWy\nyfrosZ64xx0GzSPp41oiWjwyQWvjqAQ+WVAwYcA1m4KbYJMkzkO5c50TmKW/\nHQ8Kl3BkCVGKaaz/FDJJoxSygR9eIrVOWuKyzhUgfl3pYXvPZsc+4t/EOD5d\neXpPkAoR6Lh+u+/Pp+mY4zoqFvb8WOA2qFX+LKoz/JBQ5bprCypVgiClQaT1\n+ZNaxe9XBVnZmG7Psl4YFWD2LqkjrkxOwXV4QzUJFvVv5q+nC9P3SlCjHqz4\n6HMuHV2uwJVNoAW2oH4QhYy34oB/q2mF53FCZauZ4d0WlVQIPBFlVGZAkBfR\n9YM5l7zoBq+RxCtqeVsSvOletCrcvJLmPyS1Hu7liDcubOFJ/c/sYThB8k2w\nufzmCMYz9n/7m/kjv2hg3h5VDtcs2eJRyMMERjY7fagPYK0Ic6/mlcQLHLIh\n+ESczLeEltKwplWD5qPm87wm0MRqSpS4jRX9ExypTx5Tl3sydMTsNt+bgdUt\nnyzR52pymPvFb7GxkSUJl3vuf3HirL6byjBf7etaxRMUaN9c9XPaj38PFttf\nWW+e3n6q+jjqY5S6pxu0fZTZo1tnQjvfYeBsWM8aRuyWlk6QqrpF6M04V1pH\n+djwARO1It8zh8jgeCsEj6zj8hiERmtJth6bA6ASkg1lhWcOfNT5JqNLsjVu\n1aTw\r\n=AK+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfB5MOAiots3MkUhL6SYCozxyox7i1mHovbE9iz46G0gIgIJhQHxT0v0PpkAMHwD9dkE8x0d8xSuoEhiiNJiQtX3s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-snackbar_0.9.0_1569548169819_0.17339540364175066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-snackbar","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/snackbar":"=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-snackbar@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-pEreTXGXYU5jUKOxYFT/BLOGPu6w5EzJRi6b/h07zdNPBCVMP80dSANRuiTA3rXwQUUSeazVL1SMQGc2ZRTusQ==","shasum":"dfcee0b347dcee8c27dad217cc87f5d102a00eaa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.9.1.tgz","fileCount":20,"unpackedSize":78021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm37CRA9TVsSAnZWagAAJ5cQAIxGc4ed8il9ljphINkI\n39XWocL5JUo/ij+TP9NW5eiChHcRDBhOXTZzd0JOBHuOwsDW631x2oh40DgA\nZ5fHGpCP2vDC9io22dtc2ecxu0nEbsJgS9p6hZOePpZoVIIGFghr+Gy3EJ+o\ng+CNzpVQ2QxM6PZ63Ynsy+oO94XJ7X2iJ4wEsIdRk0ptSB6ZqmlgkHLA4wYO\nAlLTkb19t8giNO3X+jxE2tHGHYUWqDAgiewZPLnkACSaOC1HZ8PniFG6f2th\nE72Zl17VG0yNl7TI3htsCYTZVHSoDW1kuz/BaxlyDo8ZWEG1M7Bk86C3KiEH\nwkkC5xah8E62x58/OHTKSKrO9CCjU11abnuLejHEHwHMHFciLrSb7T+aIBFO\n9LDe6vEWsKEErL4hnFwaV4595bz1dxyiUnMNFWyxA7UOHWvf9r7kXFx+eMJl\nPiZNWFRtJO9Plu8Wn0GptsStKmH9Qq1RFzFhqp5OrRTVsWRaLe0zOb2KD4m/\nFXlbZkb8zWQtu2Km7wRGjOnxWwR003iB+VYgfnNlmnTjnS0PmvYdeCG61MzQ\nBS4eRlIpb6T2kWXk7aCUc34lScUiHzTa38o4/czGB+pfHeg4Xd4Bjf/MzOUZ\nxmCOR58GQcaX638TcveKZMa48z5qaO2waucoysarPgu9gQY5/GBFhTe1CcEu\n20zk\r\n=A49p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwT1GaUQtM4i4zLEKzYKHPDPUbdL1vZRvZgo/59aHbzAIgIOW5VPyIWOfCI49My3wo099VYEJ7wzDuNXksbxloEgE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-snackbar_0.9.1_1569877498369_0.1214470114987134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-snackbar","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/snackbar":"=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-snackbar@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-QEJkVUs5ToCxzXdXqzUgHO3TBAqUeuXJQYQW6MB8noG9rPo6OvbVbfyOuKG7Lz0AOrlIdeVAhaLWVSVu7SJflQ==","shasum":"c7765a20450e1722e209d2afb4e9b928b27d5a8f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.10.0.tgz","fileCount":20,"unpackedSize":78072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAQCRA9TVsSAnZWagAAEyEP+gLfn+hijay+XuOVOYIE\nK31YQfACUsRneltolNzts+acRNa0pCARkcXr2kW3iYvBSVLZ+C0yuRnwjtHi\nIQmbTy4AX06YxSgUq8XG0vm5KIKiiNga0Mob1fyuAc/quQU+fpRIjd3Jr+w1\nQ99BTI3fMLsVjP+m7trfz+yNHd9LqXJcjdelOvWfAmbX1DYHxl4/ey6WuqbB\nh8JFLBEok74HmUFCLSwIWad+T756GKzKvBFqWo9L0RRFN9RMTLeOi4SWaU5v\nG87HI6VIt7ZFAruzmBFft/uGIIAMZACwiu+1c6fBC2JVyni3u3aKcPJEJyTO\nzPP1bojguwHPVrTfoXBCJOIRRNzu3jX1HblmwXJyB1lexI9pw0O3lXryGrTm\nEyOC+WAkoNlxb2li9MnazZpfnv7rMUF5vKfbEBXzNWSo4M57fDJJPPd09+1I\nqV+IqKEdrWdgEU98/TeP0kih26rOb3gQhWHpDw7MIjLBKnMj7Oe4TmDG2Dym\n+D1zuANTIRbUcjFLCQpUhLiMLUvTKSeUTrDGRPWJ+uIkU9mmn6fBECKeNLhN\ntGh83IYhJw5Mn398eBxig3GnKg35vbHZtHxcXOXs8P91I/71NpZmppYXXW3W\nnAS6U+Kr3ZnF1KRaosyc8yEfcq6NVVe/Q162WsE14dvi3VE5BiOUtE0JZVQH\nXXXL\r\n=h1LA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBZ3jRssroLdG5/89WKD7pVSIzYrXMoA9rMWngrbYzCgIgJM8AACKQpi1JfkTxIXp4p26xiPef8JnGGm/aL9hqw5s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-snackbar_0.10.0_1570836495988_0.824956009826763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-snackbar","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/snackbar":"=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-snackbar@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-9j09WgTqNkeZQOr8e7YIby9xd2MlC1wg5AZn1kZFQtxl5XBXeki/xERlDW5tWVW+LgKrISW/hVrZ/4gEBNXc7g==","shasum":"f2b22915f8f5a803a7e5c202771c4df5566c32d2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.11.0.tgz","fileCount":20,"unpackedSize":79055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3nCRA9TVsSAnZWagAA1xMP+wUD2mQI8tGRVZ7CS4gs\nnydMq0n7VvT8CYINeksQW7Ws26ZeoknDvdJUnPQSkqxfXnSrud1cl7iVPbJ4\nFLwK3X/Yxq+WJaY5Qvt+abhL9VU0TvuxLAmNALMujRi7K9yFQr/YeHa3qeG3\n9F/q/kZU5m5dcgXc73DubANa3DcET7ohefcbAfV5M4htpZjxuKA/L2bHp4MT\nVKcli+t0q4LanL1jhpQxdgpZZrBkudFR6y+9Cx7atKZNJYYzCUlHUPQNOWgg\nMagzcr/KcYdZfDEhe+yJz5tzdI1I/3TwFu5ts47ZAPzNNnEV3ZFCsjnz2hRF\nKFqJXa4uKTPi2ZdlNOK5lkxz7Fd3h8b/j3We0LyzNS8DcccmznlsJFFrK05o\nH9joVlX8Xq7xL/I1rAEgfpcIcH1zHY6IWe4TIPjBn+RKYYWa3ZQ1gqYc8Tpp\nb3aLJdd8Sv+z0UtlOYMRlVCNDy+qM6jfehIUmepLDtTmz1d1f+vBT33ThI9Z\nuC3ld4ZWzvBkCoRYAdYIq7AS9HMt24IrI4Hvuibr1v8eVD/W1ArGXOGjQU7y\nXkD0frMpPor8g4+iHLKM8NfVuhvT9G6LbeumIftUqxoOty+C2VY52FQdj0Ae\nSYtHL9NUrJPHhauRodNXgkq3AP509w6HwrViricccKPlyhWtMrcME6GUxa6l\nw4OZ\r\n=PRgK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfibLHaSCt62OlvbIMuF3Kr6Mbgli5lPjGiEl2VoIcMAiEA5wpAf/9bzdUCNO28yKLwlhPQ7skz7GrgqKv0z5FGLsU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-snackbar_0.11.0_1574804966645_0.49781321981691673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-snackbar","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/snackbar":"=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-snackbar@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-ol+kx7cOF70JQdDHvzcJZXbmI6eYXk0Axua0c4UH5tq3fbmKjp2Gptl0FCacAbeApTdizCTJp5kVBCHuCJ2rrQ==","shasum":"c7abc09b797a2f9e2801019b764a1937edbc2bab","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.11.1.tgz","fileCount":20,"unpackedSize":79055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cK2CRA9TVsSAnZWagAAfH0P/itzM57ldhXfQyRJ2tV4\nLHfK1/cf3R77CVs5uYm7xu16wghF3J3u0MuTnJmgPr8DC7XoWGkaR3zx9VfD\noEm3b2va+1WGS3TwMG4yE0SxJwInudir+yZF6qxkhTFD2M/nPqB50f/pUjbd\nAwDkCB2cEx4u9lBE3hBpTVFH6p+oY5ZlIztidS7r2Cf8TmOX8e8i3lShK72A\nRW9mKf9OV9K34cvi+8cWwpOI/ajYaJAtcs0urtAlRYO3ttKQdqNgZi0pr3kl\ntYeuuN3y0ZhMuBybjbLi5caZjrUXU2iHtiFEcgCxCEM8LMcuvvkY0GUX8lEM\nAn2IPKxRMgIqHHJYFfC4cy6Nh0ipX0QcOGH5HI9nkcJlt6UgdwPvowBkQIMR\nykHn24WlHkbWewCy/nO3ba+sbOKQBG6RUAn6EyDSrRt518073737AS/tM+Ca\nf7hvfh4bNpoGLpWh11N4zIhBccE+aO0AH3fOCY0ElptOsXfKc8txK/KFx/xH\n7UYOjjXju9E6uBSL3GNvfU71/fUV7zPS87fm3bi2SQpj5CG7hBD/+1ugGFKu\nalYGIvgLPuodqyZvzW2Qp4a22UsZBI+iTdhWtRl/q2fjJyWG0PZm6OweHMcU\nl4eH1vjywZKQ8i8D054ZVq3o6/EtxHd2iSNFAtmKgrjtkqsReVmoc+QSOoUL\nxcMu\r\n=u24I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErxUe7ZrimWWMHXv1R3sWkVBypusWjzz8J8JGHOaJAhAiA92V9m+mV6fXeuQB9S+CJHsxtBYX5UNaXT2h+9OBtn5A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-snackbar_0.11.1_1574814389950_0.5982761063193223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-snackbar","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/snackbar":"=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-snackbar@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-nQQnfYecI9UcR/HTNJTajY4povEuK567qyRPBtb4zKxsqctSd+8QlFpjajAI+P1utLbFlgrhShtSDxnKASHEDw==","shasum":"bb2182fca9832f9e3f4cb0737addd8f4bdafb219","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.12.0.tgz","fileCount":20,"unpackedSize":79055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkoCRA9TVsSAnZWagAA3wEP/00xaoeHt70BLecay33+\nBCzTWI+uqkI1XERgnsjS91MLbgMfHhM8+LaUE6daVRMhlnYT/Odn9oUG0U3D\npoo4djmAGwH3G53VbDS7l1JnTOdRP0Fd9VjoTpIsyjx+AEAympHgN4wMXN8V\n2nMoe88Z+GPQUWDFeBhGput1eU+jTYS38SmrumEB3xuX7gTvHPh4Rb03I5RI\nER2r5x5bbSBcs+xRUdqYmAmpYI+B8+PFnJQSEnwkbKJOYTbauSudm4uAq4lA\nW/nkZYFTGhLv8k5EpEt6CPHok9iaTBuedYqdTsM4E9L+PTLnUhYxVVVNhobg\nBozqjkG+M//NXpUDBtFbGFErU0YgLqstGWCET0Ahg0aeHi91ACDnQ4D7U3Sr\nVLSQRMvlahihMy9FIttcytMHjxo1B4w/U2ShD+BEpj3ZJPg9YZ9WmGlqFZpl\nlhkKRVrm7NVFjrGdInQQovOvM14sLlvDSZC5k1efHzYgYaqSfEgk6Z9lTRUS\n7T1q84v/7uudNJv/IwGZ7lzOcbN6Ug6ZQguaXgZCAgK7csGcen5PAVVqv+c4\n0wl1Vz5Q8bX0Vt9Fzt5Se2HxD78WFMS+SgBKj0jF8mx4LEhV+T0LxCDYuhXV\nZenkWBZMViGP5hOs+GWhj7Az6h0LIXMsRTeDLT/vnRY/skewA185bnv27HCN\nYbCr\r\n=wNjz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbDdnS/I1nDsFxuJJzbLVpyj8KeIuCKhqIpd7z5shcbQIgGFS+113QiBd7RFJbjy+t62gPYK7iGTql1aGdpvp1s7E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.12.0_1576626471666_0.5618259048648961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-snackbar","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/snackbar":"=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-snackbar@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-DaYJH24tWAJ0Ec1o7gDVb/aZbB8fYlN6BqQBjbeQfiCFjlVCyiNM5VWgaviQAoJ+RnDK8pOzGXt3Ud6pCU5mLA==","shasum":"12285592c390a335e0344e87c4c67da7d1057122","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.13.0.tgz","fileCount":20,"unpackedSize":80470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPcoCRA9TVsSAnZWagAAQDEQAI5d3zC1xeB2FCemUyPv\nSspGHlpnV7IKwffH2NNg4Bs3HuJTjPg6ICEIBcJjsnwt+z3aLopl0Y1oziJN\nojR+IUL+jvFqRuyTMt5vWH9wkM05/nmslBfiSi9Vaec1Vs6ubY9gEKNyqVtu\nydrVG5Lne4THX1UEq1DLmK3+py9+nllM2S+x67jkjQbcPjAbLIl46xIbsPXi\npBHrHj1YvIhGN/xlzSrGApJhh7Ck828ANWxbpgWWcDk4Y9QXTnTRdjvKEVwi\nYMRJfU+ODG4X8TrahKQHkhFKQ/586kSObCQ1IUqekktnT4pQXAS6zuJb8jD4\nGShOazY6eI6wNOJPPRT3PGJzmLyaGyGfzuav0FOQEs4xGQXavwV0UPO+ftKy\noUa0K7wgJXVmOq/lWUwpR34w3eyx5mpXGLAqHWPCN7bT26A4WXIxqmdgpUwZ\nKBTq5mpfc7IiPlYkQhJyfiVlkJi3CH4oYSXHkOzxIZgBTwUQ06YD77QVfRlx\n83ZH5gUvDo7vRbkM/Rh+sjjesalOutXUfWhVPybSF+trCakZE1ZnZWh+kyxq\nDERuc5oCtSbOF3iGTdk2uGNu4PbFJL/fHnS3pFWxsEzBlNh3hN/GL0osvUab\nxRWKZhHeUlLns5mH3w9JrV5AXFW+55nzdB0MWz1tKiuSb40Q4WTS7VzE1pJS\nG+Ki\r\n=uEjG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2UHb96LtZf2awpfNOXTXSmjS61/+MENK+vd3Ry3nJtAiEAiuxla/cIt41KKHdKFhw9In2PI7kYcnjw29tlUmGT4ds="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.13.0_1580791591645_0.5659765696417094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7Ah0hsj1ND68KA+wIF4Nh0vx5hVqnAtJ9V+y8/v6Egu0PiohxWITP9LKhO5F3ZVAmz0A9noauaGMYrgeUR2GOA==","shasum":"709e8cbbeb82b4368513316e29cfb74a617e034f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.f790f713.0.tgz","fileCount":20,"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHq9CRA9TVsSAnZWagAAC34QAJBYfFm7v98oCwwmmUk0\nQIR8Lv0VoP0bZ+fN6VjSY7fUm/v67Wg5KSuZfzSXpNzzlkC2MyBzmfYyL1Sd\n83OmkfxCxgXc74OdhinFKG1hkLFbRY49hRlFJKHOtKXps+BuIa0xPjaZedXH\nBBvhUOEVZnqKiUOC3APVQabCqlp8Pk4kVCbHu2IPHpr5EXgQ4Gxkbjzw/X0t\nHsk+IzhHs86eGssO3F3L81RTUFauyhoh1yQzm9BBcsSe6YnFVL58m4HGzHnt\nnfJeqCMtJW+3PgvMQ4anETGjEdI0i27RVYGtzbPN73y13QhMFvgMbHAsC4Co\n4HVmjueMNTpG91T32TSw4ZWoX4m1eIbczyVJKCXZfJx97RUOb2c8giHDDCBV\nSFPBw7o6SEE7G8m5sA+eHhrL2poEvz6ZXDGxiwXSvDgIZX6mhSlJEh6RUA+1\n7RqWwPk32Tw1PWm4I3sbtPRldCRLe2C4jv/DCr6BKCqdmqdY57vBp2SpF4mH\ndtDDABB24t5w7bzZDnLJvWkCuuDnyP+1EDMkugM7o6JhXjnolrp4a3NwvNkV\npGMDWhAzSCEqPG7dPcHopCyufN9dl4l8mEGCcjWO8JDOE3sfYNHLPE7B/OA5\nZUHDmQtr6X+wcXsKZ2NPP9DX4G94i+pT2bxqWBiNARPLbyj9xeGl8WD1JG7w\nBclW\r\n=sIFx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiMSafZ2Gcl8HilM2D8QjABY9O6J83WClCxU1VsRxSzgIhALucr5iytOFN/sgVyd+q1s0jEPZdeLGb+qvlfsIZQyF3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.14.0-canary.f790f713.0_1582856892630_0.6835111340095839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ffbIqprQpws2nRkKUlm/MzaLj9u9CGEEqn09jk+BoGBNnASNHzryGHB/Dxz0nd1s+WKtbvw9gPB8yZ6H88aTPA==","shasum":"c7c9316da08b648d235b799dda56b6cff3cf0551","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.c759cfbc.0.tgz","fileCount":20,"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqeCRA9TVsSAnZWagAAyN8P+wavy8FVtI2Lm5X0mQS0\nKuSdEPX3ITDWoR1NuWi4R4o/AZhsdUApxQocMnoUtyi5nqYnhVAAJS5UwDhZ\nZNFkBcIVH8+0lWXB+ACd+Cr6QXwmI78Zp2fmQPbJwe3z/Pc0q4Fxw17VYtJb\nuJi39A8rXKY0x89mKuODeSYVWMNYlUA4gCTEu0sP4FO79Do4ND1DuyhC8/yY\ndil0PcZzv5FLMYeyMsK5NEzqp34Z120FpCPtEYzrxSbPVFm2VGBVHMkjVPi2\nh/Acn83EGIAlhaU+PTCEwd7rXIOLq6AOKQkEwgWUgDp7XtRRPUmyfeq0Iz0A\n3ur5mlbzsiknIYM+MCGN8idRCU5hGuc4pM4zY/ubk+nzBvsxn/UC/auV7GhD\niiMrhzzMNvziG1QnAZR5YcEfejZ6cdHZaS8mycRzO7p0HOd4K6Glfd62coyI\nJjd+x+LHszghangvHQwIYSXBMZozB9W4aNWNNJuYqNh3VisP31QmpHVeVgFz\nCsBlE7toMJFstmlTfcyG5KVDA1EHUcgsImV9ohE5nU/+VpWldJICx5K+r5VR\n9Z4HFIIj7pU0/D8d9QMBS0hoje5y96A3b7lMjLQ4Nj82mMzXPqzWjp8kPq+m\nm9VqhVwwDYGts3R/2fL/RI+Trt+9zcQZMaCEbgTHFzL4XfESsrYQ0JZ7X8P8\n6jX2\r\n=No0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmg2v+C519Hfl5GBrhjPD/d26sPsgv36uGesFRbq7GUQIhALMbtej9/Ssi4UJIa9vrTsAof/2uZAdjUW0BJ/TppkfZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.14.0-canary.c759cfbc.0_1582934686212_0.9930935445283788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sIYGB+u3nBDq2dAVLRDpFGh3s505dxi8bfPhf4HoZEwXm2/oA2QYEZ1+VlEvPcCLsNJN6zRAGEG1fU1qaDI01A==","shasum":"bbad84be5ffb20582acc90e62dcc7db3eea0b9ea","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.97ef53d8.0.tgz","fileCount":20,"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3ICRA9TVsSAnZWagAA4boP/3GdIfgSlAIlc0K9Pa1M\nc4MV1FTPgNqXHlzIhrmwzuUWQPrZnwUgvihLJN09Wxjsxp0FxzrMFDxUch+O\n5rYytCdqj6VJape26FYhAAi3XjMcflN3kZ0lqbcjlhiwc+rpwnQqBlhro3hf\n56QspsHnpVQgzK58X0GmvW+gE8aeVGmTvaH7UDn83QjOi650qngh8me7pTz3\niLyZjpDkmsaM0bclf6+f7UzeguVzY2m1ooz6KCh5zpDUhTsXxY7BGNJ/GuWJ\nryaS7dCUXSrMKbHjQo3nmFjCcCgk2C6rOMo+KxNYQImXl2f3rrFK4YHJptTi\nSFc855/qJj7yJGzzKam/xVVr1xnTxY5kc1VE0xgSk9e5JyqRHukp8ebHI806\n2s1yVx6/3TSL5IHLKhhQSr8PsSZmiMQS5u31u+iNv9L2GWF7kHECPs6TzKjn\nWtTBgriJBHuEXJIK2+d1S5ftp8oi/0R4ecGG+xLaQ0ek3wA9kNZ0o650eOMr\nNT7QoHtNOO7PE16WW4T8eHYuKq6luVfXuXWnkZ971+pqehFsL2hSvDceVKzx\n3e6jH7hLdZpNc0yIPRC8/IqkaPMVPmKHGuR98RYHgYHj8UlYisqH/uVfovBQ\nG4swLI4khPQ1JZ6nWh6tnkJXHet66KpPcPrQEb7dsHCVh8+9amoHJqDA4OdY\n0G4I\r\n=h3Jw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBb1g3TlX21qtjDwXXWWObQlKUTBfFPF8mgb3ffZ9EgxAiBwmJxK3DuSB43I7k/GnRRz0ySkb2G54ghW/oBc+MVVDw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.14.0-canary.97ef53d8.0_1582935495727_0.6891570343872451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xDVAvG+pyCH128atyI+BYfvtzC6P31W7gbbwKt2GcTVRAIbi5nxlA2DxR7qAWUln6SYPzDlyu7SxSvGeTOZr1w==","shasum":"df16141aa59b94df688f710da44301b72c06bca9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.24f5fa6e.0.tgz","fileCount":20,"unpackedSize":81984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmWCRA9TVsSAnZWagAA4lUP/2BYYErXmO6Af6gT6/vt\n+x3H7OfNmwYyVJJBGH5GFFv9ARL+DymLwefLV+kYMdTVk58P14Qnbfrsv715\n8gX9P2Ix1NHFeFJRHClb7jGOfdlZ7ZAf2HQ/AsgxA21gDwHLzbX41Fm8L9jV\nPpONpG2Pf6d6BgdMle4En3UFMcIFsB+3mta9EUI6T4IqSoGJ4QHxBmJ8mYnQ\nNJZ203pOPAW3gXHHhV4PJUJKE90NqcE9SOfi0WGwXHJjPyMmD1ncDh9FRbC5\nACouSDwo4gos8y8J7dd3grOrlydn57UtHPGYbyxxMm6CZ1e2cbf6dT3Q8QVI\n7RP/noBybadV3LFBTPw6k6mepAlD9wR0KPaN3C00yPCDcbLv/wNwfLLtYw3B\nDLP4jegMRGd6+1BUqMyiKnarSO2UauCc+JTGd5I0y+1oiH6UJNQ50JXeM8PI\nW5mMXOm3JZU3SmgsAKMCcLGgpw49onO8aM4FHP0DezPbc8dC9SCZ38C5N1VQ\n33eQX3QR22013P9wbOBdh8veu+afZetMIPYB57s6uLQOIvsHwY/ZlfmNl/kn\n7KG59pHRpvvduhCPPW2Y0G96dO90oeKFw1PikMdaMOUPP7SyWZfuCpgVKc0D\n6M8Vv6KTNSRcygFC0p528i6Y6nRhMz/7i5hJrtgfHnxeYXf94eIYBA1OV8Lf\nOFGO\r\n=VHdU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3+w9YUvjYNCHpNnqlBVOz74Rts/iHfYhOojd5N2+W9AiEAwChVbYVPHGrXSi48DN9f+IDT9e6BrCtFAwssXUOdzi4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.24f5fa6e.0_1582938518531_0.10847878782608489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-G9nPb3hQlj0iShi0aQRuM/lK/XCmUiCeJYlxSgNiB/rvnX/CWTozXJOygdtaDM4ttkFrWWG41pyl8i3ifQm+rQ==","shasum":"2d382481ca262e50225b7e537e456c29693ed11e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.960e214f.0.tgz","fileCount":20,"unpackedSize":82008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXJCRA9TVsSAnZWagAAzeUP/328HDsLoSJ7CJDRn936\ndwBXxA/U8Ie3saWmt0m9vPe7/cZB9RBWxzkXgwusVpVyyNy6vJ2Rrqb3IDAf\n+yDEConx3/z9FQk/ZlpAHcWiGSPWssT3itP+wlgCZbUpMYsslNoM7Bk8ohEk\nOjuIwHbAHAOycavtleNnAIs0KUEK7OEDAtrZs0xwVqEDfbZrJpi62/TK+s0o\ns6RErzJo2qb+doxOSPxTQSw0CMO7/X/DPsGIrNKwveP74/PJsfQNVoTHd9BJ\n/TwaaFnaGlu1ZvL9vzMWYLyfKD1NNRhl9n0gFnCVbtqdjzQpRnWtxWNckVLQ\nrsc/UU6iaUmcRhVMS8qWfbM8Yi4E0E7OTDfQI9krRBAFkKf0fQw5xMIszB5b\ndpQaFoZn8xHz/mQc4d9/+xEMteotnYTBuTIuRvqVLkCxfj2kxBO8205Tto8K\n8kKRakW/WJmJ7WHopkZOojXGlfnP4Z9oUOK7Kr5a1BAlTp9HgqsunG8ju4GT\nxwLucAVHhFEXe71QCWgRZSYtquFJZTXJ2V7pHpU6hNhGuN5aYANb5D58oGLp\nvpBaCIGp6+WO2PX+DMJCHeKVvecwOP2sqvZLtXtzhUO/dyHGc/Gm+b9WN0wy\nXq2E1Ptnvv5vnyTUBluyQ4/tvgx/QCP0O1mqWA7GcZWDeEgx6Rrw42k6id0t\nycCo\r\n=V1E1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxZZlQdMPbltGJEKrvFjcyzfYSIXvTZhpnkHWapGwCSQIhAOm9IbBs1OggEzBC9iW/XUmOcNnI/AmBaPcDi2A+JxYq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.960e214f.0_1582945736606_0.5046131270785792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-m0+MhkMWI1sFZ8DgmO8ANTcYWAyH5FxoJAEzyZr9yth/9rEh2kBCiEGwM8uOwIJk/sfsZJMXTvu/qAh6pjV/7Q==","shasum":"f6bcd811a3b28d535632852a2a87021d3bf3806a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.a2f046f5.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatBCRA9TVsSAnZWagAADNUP/RtjgsFOicuqu14dQ3Z0\npmNSWjG4J56KazlOkQ/6Pfg0lhR2O6MWLWTXsADY1J7Xq+QsSu5zioQjaAPz\nz3A/HmxBy9gdYJ3ctjYsMX70e2eOLrMM0ySL7vLJX6IFvMeJ+ksoJs0EFCVT\n3whuOLaX7eMIS92gg41vkYOxAhQWzdaOJ2iyJSamXiVkdUYWzgjrC2P018nq\nhJ+Es2dXJdJv4AiwNtZaCt5TKsW64Vm29notubF0Vh+ZrtX3nypm4f9Al9AE\nXs8osx1AaKUgxaEQyvzaaqz4PwwnPK518CrDTCntn07Hz1WXtiSGQ3igjIm2\nd5Io7GfAJtRunQiuEXxWhGFk+sJV4G0yuzMZz3g0LF56t9cKFdtd98YTqqpC\nQwIFl9G5rBxLq3mXQ92NQIzM1ipUnPi+atIXkTG41KWXvy6TqQSS0E9bp8Lk\nk/kwow4rB0GSeStHJlhTa4XwbynVPaVkbbhVzcUzl87YTcgCN4UPjyNg3uNj\n4pTjbBKaPnxr+lzq74/0zZi9oqoOl3G8UWst9iQFZw9srFyluom45KcjeJe2\ngjYH8SzkiTbfrs30zVUh5Jx6RAkfIuxVSaGJHBoILB0NGEYGUCr9FXclK7m8\nnIsivVZi7KBLIeZv0FuZPMOIkdEXIM/eTbxz3IS9nhdUsrx7vqsTtTYqZcE2\nW176\r\n=X7Rh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrvXqKeFu90mvK8Oio75+UAalgz+8AHMcKc8TMeuZ6KgIhAKjgAGbNNBkpk1PW6R1eVDZI6NqKh4s0u3ojRF+E0Yxo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.a2f046f5.0_1583196993342_0.9339602849632662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-m8Z8GyvQbmL9GUq+lpDbF0nLGZt4VMhMdeBY6ZJ7ihYiTeOrLROBOfcIrNIbTVATaEGY25Lyr9pSMYb85fbNug==","shasum":"88bf7546534e9642e7ae25f20242aa302b875220","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.024f371a.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLSCRA9TVsSAnZWagAA2isP/AiNEzMpPIDDtaBe8fxK\nV/VeCDKvxxGjFGeROL30eLIj3TOwuPHYZFWqsdin23nnVIKWh29Z2WeOUADH\nB+9A65CQWZs1bkat5bGhI7dPCYKOBBEKDBzITVGwvXJx+sTlN7EwOFsq/WZ3\nlSaXjr/SCuGEU+gLFNDa1R7ojYA4F8eQMXgr08uk8AqeLf7jV1pzXYjMfBQD\nyL9279SXgdE5aLzER1d3rI50VGG4ufWAi8jIga6v3FGTjnVu1uTmbKrjUjtr\n5CHUFSVv02SyMvJywUJe4pNnDSpLDTtxp9o6Z4B+5dWSa16+aFGwIdx38oYe\npDGiTGSPl2IuEB6NOd0Yqt/6t1CkjlR88ujiOOjxbqWbAgGK725blmydsfET\nFfS4nFEeEBoZDNijWV3X3Z4eT8bfnCR1Yna6f8huFQr4tCrkEINxa7qK7dnz\ntwyc89tySvmciBPJLqopBsy72JnsOQLrUM7n0FhY6NEipHcXtaDsVV/zJsjY\nOEX4oLJVbXINyQ5Fn5aCjIIrREYpdm5F/s0nIXx+CxVQWgnEDsXCKJ/kP1dX\nK1alR53ebR+mbAKqGZWGyNBGiZt2BQdT+r3vF5BSkIBZl8Yub53/1qAJf4Tl\nuHS1E8voK9rNqGT7ZexifTxMSIIKQDCdHGSb0twrKdB/HaX/5y/ZpQIjbh0N\nNKef\r\n=0gxT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbwad/nLBbzsDxHI1khvQb6nfcTCjV89hG/bJdADv1zAiARJd7ILZ25Zsq56l0/OJ+Vx/qfoF0QxNY9b4SxRaCfBg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.024f371a.0_1583198929782_0.30745712381781254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hdSMjMx2n/+vzWw37oUxCfi09mkyOPYd53Ejhb5cHrMGSxa4/8gtTkesVkUhgqkS36kdT6Nz5eVEIKPWx5m9fA==","shasum":"e09b2cf4270c7e905a6935fffa74bc6d8193cc58","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.2f164110.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs04CRA9TVsSAnZWagAAzN8QAIfUsiVLakF80hGVQDlJ\nYL42SpgXSKXEfhRH45PTaGaqdKnYAOzRaCUbb5xK6dVa0sH83RzqCRC3m1nr\neQG3jsyQHzqm/HyoA0VT1uxk3NYpv2jVREmA3x+fbi4J6Fu/418KE8PPqnq5\nRRBVXZ+/uGtfaVtiJ8XRUtr7MkgrE21rFkIbW+e/y8mwFfEtG8dZJx8whGhn\nGekt6IICD7PA+1at0+muMj4COZ1ZoXZ1clftlzqycvG0MW/EQMTnKR9SIMlZ\nqdLoxXkWSBjOw6TZnenSAwnkgWaFjw3u8qibY2d6LXRIlY/eMyqWWULajyhI\nqs8u370dn9E1LNSItt3yNrh624GEJwPKUcRz0eNWDur4I0ohCkCQcCTKxluZ\neIOxTOQ39GQWVTnQTDuKaC7EkGjot5BuCgwiAlqRRlJymED9NOqx7agfYQqW\nJyTVT+VZi1o0SzNuUCxZ1gj01mSMpqRqy+szSgp1piy7MXFPA8VjM/dZTiHX\nsh5CMqnF4nTm4k2qf02wa4YF6dxkGk+HKVmoZWQe4ldpki2Op7WVBnm2jc8M\nG+pu1hoX7hVXrWpkOct0sJtvQ3wt7AMouuytDa3psFF3nAiT/13rDn93XfN7\nSF2zJdKJaDQ0eVd4NjOe0xbRpQMDK+KXQuiuqpsZ/HAtw3FGRB0S72iziWpM\nfofL\r\n=1lfg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7qjwMnjAZIGUGutTPPZmmB9McOy9frxKnPU8jAbEFIAiEApmh3YAGZuEU2K6Py1sTy/3wNzO3SjG8M5e3Va2546sY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.2f164110.0_1583271224009_0.8657958491283164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-quLidrcZmBD9vxKnBaFceDSvidxJltrjiClvPGF9vObpWLiqQ0vs5NOeyfRP+SOc03SbKClc4NiKXcKV7cEDAw==","shasum":"b621cd95827c305161e2be6122b3c485dca496dd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.edd465cd.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvH/CRA9TVsSAnZWagAA0rMP/Rs141f0bktgxyICo1fD\n5pvr3qHAxMxkhdxhLipI0JZ+tq8glZdfWDMsEcYv15ioRI2GQOgj9qPwvUbX\no+/BhdLSnaFSYD2950HgDW4nqEE4QKYojMwbcLVZBDH5D+J5sdKHhofkRLzD\n7oltcjrfjMOxi9rccu4940u85YnAJu51bLRVJKKIXC8iSzP14kGsPLiA1sIh\nZhnfHys773sddShnQcvvXIGginy5VXAjPZv9IU22yg3umweWrJW8v9yfhuAm\nI3K/hOWizLnP+1/wNJ7orMDI0PTdMJi15zC1pM4pGLpmqiQ1jbnhx06HE9B8\nMgze5+gy6ieFYGL0He31BomExWFDwAiYcjBuaXMMuczbnDwUxRe6Ny+Sxg9b\nQ1/YhvELecUVoCQjoURcPweRV2DRP4u7y0SEIOI/g7eO65XB7zJa3nWdNGNH\n3wpqRFNpFoDT9Ou16xruq2nVpR4m8gJ+iPzPhOBElv2b596E8BGyKWR8DyFY\nQWQ7IKwCw1c4S5PYlV2i9OuzwFiAYbduBzWYpE9Ts9vYWJIj5ImW2bJBhwxp\n04tJ+NaRk2LCeVqId2olRJ3kaJ1m9CJkECny5B1Z8H0dqvEQ+qTiTgh8x4yn\nqrcD/jJcazvevwKmBExr5NzbbAXPbfyzM9yTTwqdr0ic/93IoyeAGLkdf5em\nnP2I\r\n=XncV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuyNX/oHA+PSaxeA1yGzfprEpsZnBYswUsFERtNAO/2AiBm/PyKw3OsH+aS33BIlK8SPN/2aOkrnIzrAhsLUEDI/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":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.edd465cd.0_1583280639265_0.6293721132889638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kEQgAzt6686+fthOX57QPYpULmj8ngWx9dA71vkIVwVU5IlTLvbnutaNvE1aAJscUW8A/9JT623t3BfhLtwpkA==","shasum":"b6b43c9fdd0e95a76be92524e9356196329ca835","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.2b02d017.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA02CRA9TVsSAnZWagAAKOkP/1EYrmm+LLE/w7gYEFWc\nC1nffad1gxdrjc8TOGQ8aIktNleLuTmoUEoKMnxFz5yn2E4nYvRvm+yKdLJ6\nMWIXXVA9S6pF3cXH+be2ovq5FUS1BL9k/kqI2mw63Ol32q2VAAVYyiDVwsXH\nFK4l9CSLoQUWKwjrdwMdUj6EoGC3E5OEyUJ7WWdDEYIkQijmc8xh1jG5zQ4b\n6XC8rAX0MbztOZ1dFsGmhx9C06ROkV20XD/aSeZli+DzUXDT+J8K5fVy0arz\njpES6vvcN2WKj7JNZ5sxM0C+ckYVU11sn1keDpG8EBU0bXLc9k1tTxlfB8zP\nctjd01u48Th1b6Az63J4l5GEMWfJfWNDxDa2RU+8LquPv2hnkAlJ3nGc5cqO\n9xzutdc0nF9PUZq/LftvOgsnJtDpQEGzTFZ9GQFUhpp71SrIivxsB7HrDGim\nKm5DJWRq1CghpW2P1zhqLqubkwJzf0PMz6MNk0HS5w2DB2G6KXmMhkUUQOoj\nkJFZWq93+4A4rNK7C4Kw6m9fqAC75Qn18PVPbaDmfgQ0nZ9TAzQa9ToMvBCo\nCRr8l2yeivx7lDmKbRRPwfRT5Q1mcEbmE7o1uz2MBWmUOyfyb1jDiU2BR24/\nA4VbowYjlyYzcp2cgFXmMUhLCojdZ7O28pm1ziTr8sK/QOoV6msxMPuAi1FZ\nsuRE\r\n=j0tH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4P2bxZIrdGQpj2wEi85UGJ8nm5WTKxwHhPXWGcvdLewIgcCchC6r6Po2iaLsVZoLcaYw1vxZEIfRpRwiVtcn5g88="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.2b02d017.0_1583353142502_0.8264419804274112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-upNOBfk7Gzhkvg6eVw8mqhZYDdSVKU8N47tbeOmYNrCD8Av3RLUpM7ZRZuduME18JrnOhrNRQnGE+FzB6ujmAQ==","shasum":"00f7c8d215f3b23883bc7cf87217f94352340439","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.cbdfe453.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCE9CRA9TVsSAnZWagAA6SMP/2Gf3+Tsiuvm8WYbYfo5\nkBx0hJWChv4q3CwO/xJmbx1zEGKdI6SWNBcl9IxA3KkO6G7t++MpQxXUBzjC\npLvPK7ACeSOzEa5Icg7OcJlB2NDRo04HEEr52QJcgGGMNmQ/7TdgTgFWcn2o\nVDbaE32rBtt1Ohv6eqlvkn1nRdqgtVlqwqnF2NbzZiR7ayd5S9HvFr5GGHH/\nVHDn11rA2EuG650xdbhWlDgDcCL+ziqXstM+qqHQSY9jht5nbJuoCU4i4EwM\nLfeyu6q3RG+x0JjLNvOTgm2L66js7BLfhonTNf/Ubrb65aSXObErDbXNj8rF\nzjGFCbuIaJRn28d9EaFVk9XXX2zflBQE60PEj4RMSk1TGErLq/TsSY8Fjsa/\nUkst3WpuX0wfCqTLPL/NYbM8ZG2Mpq4jK9L7ImmPI8HDqZJoT8s2D9eRSgmr\n+fJWOF9UYv9Wtt7RnyiJeZQy6icF3uqAtPa+LmvepPoYyqYQcKbdmQCKFph4\no4FxtSD3rWByeV+DsmrzZw/IrBTjm0xE/asdI3BWKZfc747P//N0SdJmPWdf\nnGfTC7YiiNntDS4U9s9qMOPKG7LQf1llgmAWnhfWw+CB4ARt2d9sRWteQiGo\n0deVxzObMrEKvVrFArnG0v006tQ/Kmjb9Dt448VwiYBP1yuKmTyKDMiZTkda\nh7p2\r\n=S65/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZtimQodqGYZGSl0qOYQRp5nJksRe3BVVh9bVlfZTngAiEAjuL1wOUg4nW64sH0kbmqglvMEB50Kxyk8hccKPeb4Og="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.cbdfe453.0_1583358269078_0.4281883067557182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Vv9digev3iEQQ4jRxzxw1APxGTP7VTtcK9p2EeHysXSyVdzEABD7QFDtAHDjcf4FD8xDhMhzjwL/QGYfMFXHKA==","shasum":"5a7dedad16c764375315834876852dfb0f952721","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.02aa8a98.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRfCRA9TVsSAnZWagAAz3YQAIIwb6Shka3E4hZL2nb0\nsAviZRyNrSD0xmsFdCi/b+cO4WU8jtYyXlekMEW8nSICzfOLGOr3aSqgaDeF\nnUBi8IFc1y5P2oaND2W6PETc5qffLsT1TvDK+0PRZPiyHtyt6nLnsTJSJp2x\nn3w2Nd95uGSmbjT0RgrFT9yuaI6+ltPArnAmcfcuDOau8jEfXdPO4SRsIY3I\nohYMhHZ5ztjANDn606p4YhTgw9ESlp+VQjDUX6ZP5SKBidyShd/vhlQRpqjD\nsb1tpKO/ktzQ3/REPWDEUNdvNbfAdcekL0G/7st9t40Rh1LtW3769Xqp2EAz\nmmiriO+g6UY5c/wzXyf9MfdO0iy1nOKBsCJsGJhmibzvnGheyYGTEqqdP4Oe\nlc2ShJqNQYS/psjfGIRzY548+EVIXq08pMZwCs3iFvkTRoyDgk3s7ehS7Ec9\nax0aqEk0GW88kFvyo5Wm4TcXHBCMLNJPx9f2EG69f6wsYUmu+uzBwdgm/YtU\nl+h3viTddNL4ZlOvvectCtFj4ChXa+hU+6IkqxrWpebf+n2cYEVLsL2Eper5\nGG7JR7T6FY7dDLify5HiSnDZxFkeQHfDi8YbPwMbQLa0GU86iOBvoqC1f4sY\nMap+TqDRRCjFuhaJFXcJMOlk38cQcjB8Rova1JwbAUV5qGCFuRM1TP1rWHbD\nxlQw\r\n=ZJ0C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCScid66TwwDxJM0qjOjpMAA0dspDIMgzldcZkKfBIxowIgLeuOiTZOC4mEG70v1XYg7hd/sRD5aOQH3B2FpPtQ6q4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.02aa8a98.0_1583535198756_0.7602197178475463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dZcTCfLcpr/xqFl+5B/gVJx44FaehSckrRUjasIg9qwRPwLLk2izSJP9I2LpknWW5aSL6pfhS45J0xcOJB/blA==","shasum":"7bd80dd2caf4fb4f12e8b418b7219e4a6e365e8f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.7cd5aad6.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8lCRA9TVsSAnZWagAAlQAP/2i8wG2mdLAStgfJS1W3\nOQm2dBfw6e+7qjZtWdEOiEhIOpRlTt5y2R7GnvQ5u1k3XbWdhLXblz+nNCj3\nqvWXMJFyA3UEv0FAWk+ZKRSqpvkUJzJXlNjqHlvQAgqIdrtXOTk/C+c0m9y3\nIb3C+hEOh3V+oH+z+m6d2XXCW2GxE5gx6vO2wn6nev1bwe0i2COKBxjGNRqR\nYkX8zXSu4T32ULV1Awf8HaJeJrfo+iCFWBP77LIXYAcKt8Z9JyBCMEpiuLE+\nYtUXV0Pm+n2p+yWyxz9iNDgym42a/kqTSc49X5Vukx02KaR9Aut3HoxIYbMB\n7Yx7YEJ+declIhFCC8MM6YsqBya8Th+X3bHJxy7N+31AHBdSRxDlPz98ZKfq\nb4JcF+ZlpomvUH+YAqMPytwzZEKT2FcWOOFLTVBODxTulge3XaAyxV/Sj05O\nVns17ve7gzcWbca84nApO8fv7bzm6kIMpHWUVz7HDlrjnqnUqC0Hd26DEg/D\n1T2zMNYi5qkUpfLX8yzSgpbaPh8JbyG+qir3RmhCRb5C5la46gOd+9wigdG/\nfBDfbtZexKG0FrpmaSL8PzQLd4F2jfzGek6Bc56aICdjWf1BHfUY/NmgW0L5\ntmb1ywfdz2QHKajTPlOqNNh5J9465MmOXtGb3RdMP9dksBp2gmfhUvqclOF0\n6eXf\r\n=38Rw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS6Ahi4UTDCcBXBBXmvbLM5ylSIClhHIxw1eBaWeAU9wIgQlrBX3t/qA64zPBAP1Llo4ZGtMpAdtMqMsSwzFf6mM0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.7cd5aad6.0_1583796004587_0.9637689898168245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-R43W3+Y34HF8n9qGcbFcFcC7WwI7vaFQ7W5op3j4kbua/9c2l8vNH/UC4w7X89XATaZK87CgzBjX+osAWeH0uQ==","shasum":"2fccecac95796294ea8e8f87be1ac231d39bd2a3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.3a79dfa6.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHGCRA9TVsSAnZWagAA9sAP/0UhuBx5hVi84uMxtA9x\n7jG1em8uZZ9K99cn8HnVyTGHHFx6ismR4qVOI8l5KU6SYA0+RUstFQbxqNOT\nTvDQeX70q6qVjNjC+RmmzTgZH9ONqq4G0gYNh0fTtgwqIyMYi7YV7OPUDe1G\nE6K7grGuPuYNeRaUdKi+7wqtyap/xrcjbAPhL66fAkLTSycXvLvtZM8/CjLp\ndlbi8NyGWkXzVy/8XSqXdGmjo1Fv/Rz++upGNhNQ6jh8dFscstZeuBjg/0m0\nTgpQk/oJYH6CN4pZTUMEUe1FqvAgcevPpztHvCjCJnmtj0Y9n6emmSXtRh07\nDadLbKjYxKcLB4UTtEOmhRVp7XDl387J1JYIcfwJsVF9cweqt1W9UyTITPeq\nLOyyrFV5Yqg80X+TD7mYUqkpfutPeW4eRgwE/hH1dXJ2DRhF5uGfIqB2vhzf\n0gv/l3vvX+vEd0JazruFHqsfHycEme9bvk/vxE+UeJ4Mi9uv6P9y44jTp1ch\nClqrgv+nSqHJbpp4mYxkv2FI9fxzucwPE4bdQ/ax+Kvaf+IC3MAFikvo7QAP\nfGXdn5Wc0dSU8lPGde1svqOcivs18oAt1qzbolhWVQQxfutPjB4RmYVeclqb\nEL0bOAh4/MVsDJaY6dfeUC0k2ll45/t2o2NcG/t6vgubeSHmTyeuHelcPfZ6\nLVgi\r\n=GRH7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwW8jonsQ+e3pakEwjF4ap+4+E5zeGgRi/B3zl/e+yvAiAUsT2LElWNFQigd5ncJ3a9wMV+X/N58XMnnpjo1edOIQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.3a79dfa6.0_1583808966153_0.3280979419865444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JLTu/N+LOjPPsR2T9KhsKomF8Qf4Pw2bMhiDeJy91NKsK8O+UFv8dVqanvNHAoRFgYR3Je2d2G+LIp4nNdOK/w==","shasum":"b34881ed461366886f197242753571b543c9147e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.22e0f5c9.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwK3CRA9TVsSAnZWagAAZ/0QAJGii//DHQurV3CuoU1G\nnhwyo7h3x4UArZKhQL4uzu1O53lI2fp2YBRAJvUNKMbDooSwjuQhs/CzGM/r\ngtWzaRoqqtmLRRCtysO1G8CzLJFagqO34kWGjZ4tGP5vLNRpTw92SL8l+M3e\nT1olB0TKTVRkSPck2yGpcDivuoAMMtho6WSrAg49gIWYsMUaghM2XjExrASN\n/2lpQRr36VTdZtz7ef00lqnkKbp+cVO/hu1McGyvgpAMwB01gtpDVlwUwJOE\nmoNq8jzWPkokDlt1+fPeO+d6MGMaNM/pU9I8g/UthWeZDIgn85Wv74Z9Ek/4\nTWofH7lqc52mYl1fn9m+nJ7XD2tzJMgIv9ctQBRTGaSbQgBJqWJOAzcAK0wI\nyPBJxMhB2qxf56UFvIS/AJIdinqMMAlPFBhAYOn2vdL7dnOQf0JJxkOIvZQr\nvTlP+VcPdGCZtaHTkVzEZn+IZAQlyaRplVXr31yNuSUKmmgNai2Qr7x4LsaB\nVOuxdpJnM7yYBxXnjzWjnu5EfN3XNQRCLSsau2yYqMEoACWwe8K26ZTznKLp\nccRsNypz/FCLeUPhq3/ZWZqKsLpCioydsFRznK3+j/9//9fTnKNjfEcU6DrO\nlI7JwMtZHBibpEFpL+s3VuWrzky5XJaKYV/kgbiyyBWbgujbMQxukh8ZOkNW\n5mNY\r\n=N0t2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNYB6MpzWqanfYSIWevgEOfkbnx3zYD84Qp8WQGyvy/gIgc8MPkbtHS8PM693Vc7FjsYx9Iya50Zl/cx60fQF9w48="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.22e0f5c9.0_1583809207116_0.9685991494602713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7fZiFpDIQuFl71oP1UEN2LSMe8aYymccmNBUs67qCK3q0V5gkV0Jw26WGiPf1xs+mqnmtJ3CRGivYo+ZvxGigA==","shasum":"98c3a6757a290d3d372b391a5e1fa510eccf01b5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.f23a1d1b.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/77CRA9TVsSAnZWagAAy9kP/0aNlfQrs+zzk/3HwWSV\nhcSdZMt+BUAIxWWmzWLHcq3P1CBt7Zwc0qg/VaK+0fWEVWL6oMbzdO7gv4Tk\nvP+m4agh+ZzIgiE7Keos9+GUZsc8FQCYeLkJxNKBJoSuCGq0tve02RrKaVMe\n0DShCLSoN7j8cBPoIVcUPXst1tJDPpt5KftcJ6Pnw8FfPCz0K+1PRbj8zCTj\no5HbvzmyCqrq+TR24IWRfAkloxoSwvKt97qoUeSgryMXdgVmdDi80cVnN9xm\nA9rpsfUgZ7ds6yNlpWp1awpFXc+ClewjOdf4DGWXUFSO5qIAgDA5VinpxwQI\nLYDc/9zpCDiJCXcdQmxO4g3KXEZHppXsIYI3Ax5EhIgvCeHRt968TrEeNwpN\n4LgwgVJx0ZgIPLGGvRk1WSw+XuBscWWgfz26+WmrDA3yvLI4szjflRPT7mF/\nkkp9TGGiM1TMjLCSitJ++/6oi3J8qLkcF7J94xxmDzklcM+3JqLZp5ipB0+S\n5PCr7M5dJky0C6hMnvByArdy1R7t4ULk05jxxS6NU9/ft8D3FKAeMuY9fPbF\nLn4PBKa5AEfGc3H1odghlDrCECZKaU2+Ac5euxCPL9zpBufnqRfMKS6ROavL\n9s0U0dl//PYem+t+PHZ1LVF5fdoFchFE4tAUfYNL5LW5XGr2QbL70rLwOKvV\njfio\r\n=MeY9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPmWj88LKUVCJHS9naek/31Fr1JEecNeZGblW5dL6MQAIhAPt930Ea6a9ODph9l+gmMMFhPe5qpFfyusM0bKY7SJ1K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.f23a1d1b.0_1583873786806_0.4317423011652737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X2gyqjNtDTcFG4SyrtNNwK758XjFPdPGfpXNe9zMcg8SN8IXsu8Vfrgb+k7fu7ENTMtVHPE39kbMz8NmDhuamA==","shasum":"3d9065e7a6707def101e8daf7f3545a0234459cb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.34b2d69a.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANBCRA9TVsSAnZWagAAhrcQAJ6hG21i0xi86hMBuOKs\nek98YqEs5z9QYQ3IkLI2yOY9COBeV2tiPw9CSQtxr6h4T0pHi45nQGcIesSw\noKUpqOktZ+Vejz9P4waTXw/jjZRIoTay4lwJTMwmHOypSgC4qnuDbUW0GKmF\n9MyWHYHz701t0pPHkQd7LdPqBt5+4FRxKfgEWSDe//Q12+k6h85sJ1qALCGZ\nRlrcD3mXVH8NKK0dyjHSVzsRyr3++XC9KgOFSsBemFcE6E9AQJeWqtQ2E0gk\nnKlYYEd7bGxrlnxeB9/Pf1Kf7LqV2ZRkfJGUBB7WaVueXJk61HfbNCPivNj5\n57mJZvsoH5dX9VpgeMgiTRzkeaAwAr+ckj0Zj6sG9c61wucuWWWKU/XDVEKl\neB/y/+ZgeD/sDBDeE/sFHhXIk+iUr/QXRIgOeDO7wecACfBfO1c4pZ5Wc2Fg\nd9RaITd59LaHT/nevpUUXBekkuxIjFDpaCtTYoOcsUGf+n3V9frEkoNdfImM\nuEvFq8x41xLyJ4DdzBhW7WPqYgOlBimtG4zPWAcLPR6RRewbRrfyiQ1k2/qL\nEN+s4eH7wzrsTPwolRSUkFj9ScOHUFmiYr0tj11VuC07vp7gIG2ds1Wai3Ru\nYNm0kiIXNrXGfeParCg2vnluQe5SbnZVs27nVi+Q9ruh1s4QrUEKiT3bi9F4\nTT3o\r\n=rxlN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTLz/Ga02cBfMQLHbfaxw06T6C0KZcyEZSBV07/wbUwAiEAnd8IvgJ4XKq5J3Uf9DKtP9t8eL5LeI5MlcomOasyq9s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.34b2d69a.0_1583874880634_0.8431471538353494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-e94TH+u1+HXFXtp+LcECJeaZbKkJc/f1MzuojgEFebFZSRjMs2o1t3OYNVFzFSLFuhN311dBZGZ6xwUaWYPKIw==","shasum":"1eef4a0fb2b22120b95621cd0a70b8efe898e890","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.dc04abe1.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5iCRA9TVsSAnZWagAAJ6kP/iG6/jssIDtQxPt+ure3\nhAUkjXPQvQ6LEyBRZSmoXfkXX4mIMygIMtZSZ0tHDvfJ37nVhc0DGQaiV+ok\nRovKEMFVwkPTEVSSRi0oJIDiQU4bmmd03DC6HcLMl1UshMUjDIVrvjrHhzoh\nWJO44qBI6EZ6wChwvXVOYMIni7CMNDQ/C+my/38bN2KOia2iFxtg3oG5Ytux\ns9ucnozEZoRJVSX9jXxosSCGRbov+EUJRlyT+4owXCm0QEHdcbtOAG+EDLP0\nrydK459Rpgy/3DRAy/tFryKjGSQ/4giBxNL6haZFJ751yF2z0e7QQdYyrL96\niDt4QH2V3CXLpB9AyoICoj5ZjVC1J3rxOgaWgdA3DNmRqB61VUz7f4MGRJaO\nLOk5iBRZKS6gguKbMYyT02o5KDdkqmWFtCaKK6I952bVYycaTcXyYlq5znZM\nybbyuzFm2MrwM47NUs0rkDwlaIdCMqE7B69CY5ssYuUb+biuZNFaR2uVDe53\nC7lFBy7pa7wDIT+41xpQneKa5rydTGc/1Ht16fZwm6y8psJQk2DP7PnzcAqh\nZ2dvqQq7/b01R4SZB+Phj3iECM/qvFLUcblNqxFnCDVZlHUUGKaeSBH4xWHB\nBCsVS85gbtygE5bRWsjMXYwHaXBM9LL/5aC7rRmQ3Dqpr4U/KyC0wvwId6EP\nUCIq\r\n=GPy0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9GuVZCw5xwWLu4AJ2JvbRGza6aFLCJxduVNYfHrLTeQIgW9NpMnbNEH5mNTXf+YCSCsvlelMJk5dsPTDPfvfa/hw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.dc04abe1.0_1583877730283_0.7873858695277509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hRqqC2erFEwP49THMXDz8hGpldsfs3cnhAaBn27fHk+2YORwk/jrunUkZObIh8rS8MtKLtBanXY9oO2vUiAfHw==","shasum":"fb7ebef62172b1acd00fc7967d242e16e64b424d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.04ccbc88.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIqCRA9TVsSAnZWagAA42gQAIP5AdtAb0uDP8khAQfP\nb6W1pFi9VqVvTA7g9IcxJoRaoSOwpKZ/NBm3oSPuJJ1zCj3uIGGQlK3RVKaw\nsHTr1XejLpZYnBvermPG5zOP55aUwcn3F7AOCfYm2UFzji5k0AYhvmk2hwrL\nrbji/axjtPk7/G6d6bHF99/W9ZFStnpwby7UqIMjc88OmdQRHKUtjLCDJtHR\nhAoci6C/a5SP2G7dkDYrr4/pvqGvak5luGe0v7Yp6Z9TcLsKZcv8iWAPnI4W\nUk3VChrN4H/S0RQEMOxfAwprbb3E4DfExfy/Tm36h7EPovUP8Swe3cBXXwZq\nhVcAEGdRihrnMAkjNgoWKqZre6uvHaGPkKX2p0ABGx0helSzAPpwUrz2nzB5\nIJGyIY6ZhbpryHEINdSJ/ba/cOxl1p96y1mQLpqLNrsP6OUljI2plnhxeIk9\ni0CduyLzgsJGFgo7d5DR9ruUnMDvKrbS6WBvxXZ67gy4M2opMVLgKfjOILJG\nriOpPzR5wnuimwOWIRX/w9JrLl4gJNjWmryHI1XmgTmNG7kZCVfB0+JiB2Iw\nkFPzT8xAjrM6Pecub50NdIjozdz/DVleC3P9s1iZk49r7iGQpfFgQqUcakXK\nFVx1Vj2JJ8xeNPD6+DFRSux+OQxi0Fk9EPuramHLAmwPvQhBpoxFy59YxSQC\nwOBK\r\n=wTsN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlXmFGKSDcA8Ykzv0RMLWabtspDnzaegUfuyeQ9dFSxAiEAzxOSrN0x+rK3OC6QFnnqx25ybQbWQid5i1OhG51Xlzw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.04ccbc88.0_1583886890106_0.023655162098728866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RuXIuh3BN54iUuczBHdCPvLRAxrH8Px7ClUX1GeCBM6BIlZbh6wQ+fCewlRswDKz2wro7lUdVUxOshXLn26nxg==","shasum":"29b0874f4ed9055baff52fdddc472694e9ee4e90","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.55338c25.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIW6CRA9TVsSAnZWagAAnXAP/igLWa0ZrqtjDwuFxFmw\nnAHck/mBLzcVHEMu6VB9KX4XPN/R08H2HMhKe3TQz7pD9fYuUI6AxTTqg6GL\nMjTVuEVieGcNkVnLDIHQDg6MPF+8f8pk3Gok36btJ4vmqyIORWeERirw7V9w\nriQbOtne6zI/i01sGnLfozdfgPDKk4GgAyWxXGaZBfw2WY7N1+Cg4oT8EsXb\nsDekRxD/KQerva1TU/dQgT2ynHMl1HclU+L2srBFnSqKgVovfbiHVwdXATGi\nO8I6dpJ5MUYruueyb9ab29tfi0XN2/OJ20ftce94XMalr3NQG0wZjkJRmH0p\nK0fOR3KUXjrwDqPhClES0jYjysWrfuI1D7GjTDawFIhNM53IoAn0gBtj0zOR\n4ExYvIy9t393GMNbFUbKZpGCzvCLhookBiABGtShqVN0ohH+TT3GNVfQyiBO\nSgzVVtMHJUsN9ZIUbk68iewKYIMMctBK8M9SoFBApNmIfA3bUOwFqoZ5LrDv\n0/xueoZOlO8M+tsuoe82nscPhGmn9FLS3MiTQVDakgu/ah/Spuva2prSY6o4\nUyogpELSK6jeh9QDnVQ1JguuNLuqxFPDH+m+2Kp4ynfuGzmyMGDpG2zQzBM6\nm9XZmiRsqa4ZlOJzhF6Z1Mb+JYBP7U7meAf/viNB+0jn2h7WEKlo6ONSY438\nCmXR\r\n=YcY/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN0T6HUNxy0QEzBG88ztvC0rr/TMFVvWmT3cJQ5B6BzgIhAMZ4ZM3ZNWG86BAOe5A/PSNWs7EjWUE8W2PrMrNV4Nei"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.55338c25.0_1583908281827_0.5392640283590897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EPIPwnWr6dV/C10+6AjHBfNwY3RldqWnRJ+XJuDPQgYnhcyTkygEczxWgj3mzItg62Co73vX40YX5eRp2FV9wg==","shasum":"8addaf1e185599a221a2feb0dfd64ce13eca85ff","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.b7e388f3.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfcCRA9TVsSAnZWagAAXCQP/R1hv5FjyIWRaX09HUnE\nhzyYK7ExSN8KX0Tj9JfRqm0u2m9kcOOpfY3QLEhUINRl8haZVNgt38+noUCQ\nz9OdAUI6M0QeTgRSjwgSb7ndkwLANmogQK+xDNSKoMtJORSVf0v68sFQGnTL\nrH7W5X9X2lKKQnoKoGXxlPB7RxTmaOUF9LWvStXckLME+YFLEEI5hT6rr2nY\n2XcuGe3XwEwou6a4evV+OChWLxVXoNNqB0JkdYnq3SWIaMBHmX8rrlA/jIBB\nmuhHKYOrCr8lVjzZAMhQaUGs5Y8zy9PZ+xO+W6z/cQ2C80O8ZQq090bxGLSq\nuaeoFX4//MOv3oR8cQn5MOrB9JX0wktEbia9xzmSCIsq4YgKfewp7Rt0nW7l\nqPIUQ5wey73Kl1UCDankfCBJvydWt/ZZ98W3v3MqOjVVj/jYuBYBgt+xhCqd\nktUg17ssc4YhY3L0T1D3yWCG03DdYha1ZuvpA73kMiVGO6kHg7xXwIH/fI94\nnRcML75Irbe4R/GJoxvxX4mp4ZfuSNdJ5YB/rakUDHKLmm6EtedwLf88r5oL\nMOaIv+JP43hGVbRmQCEPC27ltqYIUv5YWGbQnsRPQIoqC1rYJkQJryv7KlOq\n0/qvuV5FrJhynuuYfJYEw8FU1s3MQwFt7FWw9sbBLhK6FboFeIpP+/rRZSuQ\nINGy\r\n=UZb8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjr+WV9G9lvwANONge6sOvHCVnQM7zCd2uY9Na9fPZlwIhAPB9lSQ/DD/nWOmLNyvxdiLWc0u5ED2J1nymuCou/TXr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.b7e388f3.0_1583957980049_0.06405388859011008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0NYcZ4XpqzwkZ0E8gHfLBY4X6WQF6RqbGpsQBo6yKsvgs/qe//c5vtrHEY4B30tEs6uZZBY+Cpx5QVqkKGNgYQ==","shasum":"2bea9cd219edafb4ef03a2c9c0862a37a115312f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.b3211481.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjWCRA9TVsSAnZWagAAKy8P/ielLxmmMITtNgR/Pl7u\nFVXxFsC7/LRw/LOT7EJ+bYyg9jgTC2gVp1y9e8YnV8d35D7wHsuMr/Z0SIaL\nni//sSRBLAsTsrz6BEQxIds0rAEJS+XhILzKLReQ73G4EuxvmEUEBBAT1mDl\nFrSEnoOLkX52wvowEQHjqllFCcdAEvRNcbQhBCASV+4eU/NClrZotvkZvsRj\nF3v4cbhuXicnOk6ln1WeCfXZOKaGblbVlPuuCWsuCw5f9QQ/E+vyNNulLH96\nvFc61qQ6RKKF9VT8uM05GQZIFR+Lj/ZT60A2nFNwB/IijeVlFwXz3yRFLzXA\n+WF0kOCNdVRK38+6//fnr2rUlncaE2TDcPP4rVsoT8kod8NpBvUGGI290SHF\nSVtgv4nvbUHRM2ambD02tyk4g/KncsM1g+cJaz/3o9eO6rzEKJrFhnfj5dlv\nfGdVfDw0Ux1J2O65tmbUB555t/WQnyC4S5ZhTlOMgmrkIfoIsutjL00y6YYS\nJAAZWzdNSMXsrslGpk29aJQQvBb1QPsZ+nN3/Jj5RVmxz7Cj/npl0gCzP/Cp\nWCGYlUxLp0NJL1LjaNzzysi3OG7bXg9LLF12lTdqJj4KINnPSnozLtJzinyB\n5H1aFcOg8JvxdPjYjtR1uxaHsO609OKFBXd45cdDtzdyxCiN4goiDFHvtNG9\nK+8F\r\n=TVTV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNdFxr3v5hZDpH7L/0z9G8HJf/53X7W8o12t7qMnr3pQIgVFiqei1eC4BY07DKuV05wDKv1hgpF/6eBCVPT5kcBdI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.b3211481.0_1583958230376_0.23038050226293927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dP6vqt7Kqi/llvmWF8PCwwM2GL6h8C2UPB2PusSzMAVCbpyOf+KmwZE7g4cXQkDlO64CIc/ceOmCuNvXTj+lxg==","shasum":"dd7173473a43d2eaab0b9855e1415f29aa104c7a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.0b5c7f23.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3qCRA9TVsSAnZWagAA65wP+wWP7551VRA1cXnSqu+j\nLxPY/K4O4NdkbTp0IgkTDmgnnLjm0dEwmXJG41F1xuY0krtRkh/z72IcEOFN\nzvc5evqYsr7h2sKUHPFZvA4hMWbIyHINZi4p//1wb0J2XVGmWN4JYext+Eti\nHEFiygauqzyy0eYu8E8Qn2bhUECxXfXBnP/dzzTnco2P5TCQDLkaFP1kSabq\nZaqbgxWSIaV10hxtZk7riglsdeMCr6Y7EvaFHsfcNjE+kgSjKIbLVnEuPwon\nQ35if6xMOp9fJTF8Z5rPJoTjP/2J8WkOjdj+CFaIXSgg30V1swkTWca77jM5\nH37i4WEHQVutcrWDmy3Oz4Ud8PiesZOrrdVR+LEQIzZCWdtr3wO1vqN9vAsP\n/2KJoLUt2UBHsceqsO83yKRmZNAca5L3y9AMQaMrPopcCuPy5ixiwU7jpxyQ\nn+BeEAakzBz+AQpqofd/zKMzra0wABWi13xV9QCYPUfMRc2zpelv/Tr16vbi\nmhFHYgFkr9PT0GnNz6hOrldizfLcE84pJw1n7Wm1lhA4T+Tdf/iAfSMo7T+Z\n4tTNvG3+MyrB6sG6aeha4QYMA7mgM1o7oCul9A9AqPXMvGMUO9LLOrcmWMm0\ncldw3oGlnfBD8fJ8U/gLAksIIoRoL4TxvHO/K7qH0vu1EqC+GDD4zMwMo3zt\npI+4\r\n=CL7y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMiVkgyYwAf3FMa7xrRJxZ0FqskBKh3ZnMymoff+0oqAIgCJJ0HVF4Z7GBTS9pPbWxwQEB2OeSnb0YiKwqWh/b/9M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.0b5c7f23.0_1583963625953_0.31120956892598306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aRcCfsR4mVdXRGPjhGOvkDxi7o4TkLvdkIzSda6oBylUGaQG5OkxMe9BOl9zGT53CGuE2/mybkVmkTY1KanJ0w==","shasum":"9dbbe40973da0e4d5b09b87291d896f5b3fce073","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.6c0f0b27.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbOCRA9TVsSAnZWagAAQi8QAJ96guwzgL5tChYufp5j\nC0Y17UIpGAPbc0Q7vl51yqsLA5HSkyxJT8IdsaBS1MphNKPxy2kYIIvkmdq0\nzWA3GIvhSzcahvBTtdM4gtOd7y0lIY4B8P4t4BKEqPV+R3YIJM5F47pE77fB\nEqi31SM7E9E2Zhqh5DnkJiO/Gzu8LWVCA9NpN7rGUpnPX+Kc+HyqGJagimoW\nWv3m65NkjvUD/vk32xNxNx5x0eQs2Il/tuHIQEAwqc2o5neZZghr/7380gON\nx4UCpBAn5xYthNkB5DnGnqKbk4LaF+pWoKPlibvOIJRfE4tear+vultEYOSH\nebZINYxsBQAUtO2U9Akz0jeZn+rVljeiXBblBYmIg7M1TLzEULwpA3RG7ULk\nov2QgONf6Vdgw4JybwXPfh7VyFGdcm74O8dVHoD8kMhsh0RwcqH/m+Dy1NRp\nmLAfCp/85UGL4uZfQ3opf8u5f0ISKjn1tFK4oyGnVKLqbkjiSjdnC3rj2R7Q\nK+KuHea22dVeZ5fZuN45NqV6Ziy5UKVAxCR1a91pu8zLGJ9KYZRkGiHVvlah\nX7BklnqoZ2lWcUD/9RNdGe3TUGeuSYqysvQlkV5mZ/32gB3ouK6o+kHigPZw\nnCx2Tf/cUs2AriUwwJPSwN7n2uIwJWeh5hLjIKc919Hh3jMZOm4eIItki5cn\nDXpw\r\n=U3de\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ5p/SSeLpEyR+u4/hWp7Vx/NSG3F0E8RZ5NIlV/WDAgIgAfKLvmUv3w7vMMOMmYwSGUr5Gw0BFTEqwOr3XYV8Vgg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.6c0f0b27.0_1584047822455_0.021484390700185596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ARpSm2SSrrUgthn1cF1uQdSepGlD/z5rjYQGxhE6t9xHfO36SqAFsOXH3T4xJh4tuOHEiCrfrx4wTLmDtXiHlA==","shasum":"d83a2ad5a1a419e4cdbe96b5abae495025c56d6a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.b6c53425.0.tgz","fileCount":20,"unpackedSize":81999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7rzCRA9TVsSAnZWagAAom0P/1y2/uuRmiKwuFIBZScI\nagl21EVPGp2H6TzRjd8DtGVM19RXPgkicNLec27S16qHne8Ln3YIv4HIha/s\nTghtOfiwgPt7/dyh+E9BZJk2lUQSEYBiRXq16n8qKUxxdoKK6ZmHuVzaRbrp\nMQ+s0lXRqT4eRx8l01vT/HRMgwjyfdaae5rAK4W45yRCL5hWcDdCduMCKTut\n6ICP9px/A5CpfJUA+J2/q/0FDELlxW1Ekd/fQVfvRUVHjrURNpNOqxcUirBB\nIuigSmPmwghnOR+zQ9pjRFDHFvhNEh5HCHIHslQGPvIq/Wpu53SUb5a+snVA\n1ZK0BCeaw0ZYQCB9uZFbQXxV4ubhScvpV3U6VXcv7l+jIvCVgDsoDEtbcR58\nv67UsyfD7V2gMZyqAqv7Aj0GH3GO+sbvQrbkmGVLe2n0obpz20rH1fNIjSK9\nm39LMLzbEeZI0rZocpF88BZOSxsNKhUh0e54U35mTkuU6PNsUvC/w+mj/cdw\nhXvguBFY7Rvg2RAOhuRMJM0kpnRxV0MJpr9WRQr911/ze0/mnIEAassZOYqp\n9iRG5+3/Opu/hhoaQ+8oF7xHcpZtEY+h3SUiT/D+RPjE6xYfhb0iwyLOE1lx\nCBUVAA4tT6A+4DjpFvBn2HSCeqx9LUshKZeEEKjk3fY90fN3Y2ex3hqaizRG\nwd2n\r\n=17Ie\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEloP8SjnvZeLgqAiCzcgcGbWBoXQw14JIBRaUXZJI5AAiEA4WBkpfTO/L/jQVTwljbwPo6w/kJbXW+diZPG6RcK1l4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.b6c53425.0_1584118514657_0.14588648921961989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6lpmHD7tGbR7W6IzosbyrGUtEfQWvKswJ2uoWWdzcoROwHr60lIGaE/RuHTMdgJZONkspz7INKCgAJZ+dzvMsA==","shasum":"b8671194ce9761e79a2fb4cc16784e4328fa7373","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.306cabed.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT5xCRA9TVsSAnZWagAAo7AP/jWYp1ijf5Ik0yBsla8l\nuYxX9Y1lUJVqzpRqDXXXJTejejfC6ebj8kYa0jjzoQCu4dGvuMy1SZTZGIje\nsDqMYfsU/9vLmXqArn6yMAA9pcjm45HpeRYm8kyf+4++BZttTS7Q+LbQ49wL\nifom/8EPR0gX/hktIzok5R50GUkx8tBLfTRWfmlXu3zTRESb+oqk4jQnxmM2\naJhaQby4cJujYFEVspNHunOdgZrggzfn5SnzoSAMswSYVm/Z348ciuKlbY09\nzEQfWhgXy+rLfLmI3/tPvC3vW0v97vxRin/f6vxJGxRrs6ak4CXCqtqzw6rG\ny2jM7UQfD4kbkqn44+wQ+ILmbDcskjJv5j0JbZAI0fai4+ivzninUNQTbI9u\napD6PYLuStwQDO8p9Kgsybvm9TNB6YnoYJ+nRsJpr1XsemQXL6oKMqKeVuKs\ntaWVDCsMeJT024f4UL6F9VVHT7ErpJseaIERRrfbQ3WPPZjSwEpG/+00U+B/\niDY0DUQ/vNPkMpizkSyrs/eFjPgfFQeSKircv1DZEw8Wn7JXPEtsekHfQWOH\nXa4vmJoeqk7H8d8nWWdAdiKQHPd6Um2PggYMR3GtGcOsfT53qBScMipVYyKI\nypjb5MMwcOe/Z3yzIWz9pernsxzCo4t7B3Fn227w+venIxSeaNSLJTe6miJ7\nMOFP\r\n=Jjbg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCijmlqEDBTo7BYV5HQMw1AdYyhVjcbde36Grd7k7jD9QIgTBnKWL6UuX3zVoOfvviUeOQyaKZZr+UeTmJ9iL49GEw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.306cabed.0_1584479857346_0.19544552062534182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oHvKiDOGyRI8x+dSDm2JIA9l/PaCKDgV+7mbEIVwyvG9JXlVCut/bhzrSbAUq6PMYLM+8dBrAgxxEBu1aveH6Q==","shasum":"0171884777c2dd6f88b8fd75d759cb35cb803c48","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.4e250cbc.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/iCRA9TVsSAnZWagAAm4wP/3XPF/JVGoiCTfsSCa76\nZOEUK4fnY4kIBqTaOSwHM6XQALYrzCNWvm0jzDgyXnsnHE3ysnkWeDYnsLDt\nF5soLWwiXwhQytpxG0MkoYd8sHTRnXdxXZmBtZNNqZw+U4T0JRgnXjJZ3/ii\nNliBp16iKHskukVWD4ByFvfveHVkvP7vgon9LTywLKX1levriOjolCXLQ2aq\nNjJGRrwV8a2xvDKmF1FhoBmSThxflPkdQvLpl6hHQN3YeSDIMisGs1rBCp3Q\nKH2J1z3p5PZxsBcVnJ5zgstthPbXpGEMVS445xnqqPAl3lcbv/rQf3/uDI1N\nRJxmpQ5oI4UbYcwDvjYuss7eD/fQw/3l10Sri4WfdnZWSbe/QCKTr/L1bu9W\nO+i0FHrNUzleI3B/uInEtNez0qu2AnBJjST7HjaFErhMOkw3O9+LxsbuJo3i\njoj8p3794EQQjxxHvW9vgHQX15aqhDiomtPLXzn3bHgAc3py7fIpCUnbZBbo\n/QKQ0xnsodKCfq4QcsFqNSz5FSbjHJeFsLAXdBOoq5JW/P9uWTVA9USEaMX3\n/elA+Gt5VsjjedL/FvBZ8ep7MF7Yb3PVE9hGV79Dkj8ypvzP5cPtngTe9w1j\nwINLB6L6Zi4kS2p//lV2vhJaXWzPYOyjitCIaUnWUVrVDofK363KfpzINQ9E\ncTME\r\n=FB9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC19h4ZAKG7mTD+mZs+SjpbnbGnycJKC5X3eRbLmvCF+wIhALVyTH3Fd+h8BaD0SGLg6IlBAhCwMRmzEX93AUKhJlK7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.4e250cbc.0_1584480225567_0.16996572454453251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-I6QTto0BIRcofmivQWG+3n7KI9ajuRpU6470VT4Wmgx4PG2i5yQHX3br5qq5MmVhtqRj0iuddqKDVAE+JfjmiA==","shasum":"53595f37ff58877d786b8dcd9bccf06665e27f6e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.ff82d9ec.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmY2CRA9TVsSAnZWagAAc8QP/2rubZJQ4SfOfcD6TDny\nLZYRdxpEV0iTntJ5uzpFXKz4Aa3IdHoOD3Jx7N82/p1YtgEIyF0WonnFD33b\nNw2U9JuvgTUaRh7f73vA7kJHmmD60HBprJBUvZYriJsrXmI9t7gnQhKJk70E\naL5uW0xKgA71HzjJY8pKtU+Uq2i7P92oHdnO0e1sqbM6WDuxtqfW49Rm6WJn\nSUbPWhFoE/yEj5J9iMpNewy3MwCFXSJHUvxgZ/fpyjYmA1kYSN1NoVKcRAzQ\n4usFsQU0z5z38HNj2oy0huW625pUyjK0jjR8iNdLhvlaNLM8ZflWsSvu/bgo\n2/xpgWchCs/DhL0EopOpDPPaYneh6Z4ihfVWxKs5xurmWk3x7a2Am7Cih9Xa\nNFqoP6Iw7Ql9iNf/JuMNmIUzJHedxUOldNo97QHKBKa1XVGKN89l5QFh55ij\nRBDlqcGAy543GyxQxVueiB6Y3pB0EEflCQImOsjOaEcPvQxZV2SzG/ZafcnZ\nqkoB3ZqCt4EWRKy3Yl+JKttBn8DQ3HetbL7uuD3YZWqzxGuXEf7SmV0JvRS9\nX7kEAaoGHvGPjVQN2C7ctBSJdQOex1gC4xq0o5aNUtEJJakT8HpIesW+fTY+\nJZROtQCenrbNZ4D+9nxhHtTHCtlTOmCAbUF6EWjltaYnZXvWNlZmDF209NGJ\nobCY\r\n=fOvL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXUb7ihK3+fRyHBGDkLiK7xcsPMn/3WGfVlW8zIQSvpAiBXYwt27f5vEnhVZ3oUuQIAhfaR6I6xBvh/+clfcgeRmw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.ff82d9ec.0_1584555573942_0.2095440920905438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-l0OW5c0fPmVrlgPIMqNTbLAia3slpl5ZsWWR7YsFD2H+DpRqhD3DepGkePCIMlmSiuoDvzmo9r9MG346zICxPA==","shasum":"3ec9cd289592283c5bc44c7266a24ccc247e3dc5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.f50f48ef.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8ASCRA9TVsSAnZWagAAYpAP/RoqWwcsZRvinFzUR8iC\nyWx5DzaYxvC8Fy7X/o90tb0gRDXTeLiUUZDaEvh9+JyJMU4YgjdsmZ93Xp51\njB/NXeC7JobLJur0Z2ZFvPLn3X5ucDRYkUdRNewhKqbXVFW1zs4FShO8gpnN\nA7XEW/422R3h63H5HvkVo6+V1Mczun0IYsSkEug9GYyFi+AlFm44rI/EKucC\nlaENFRpJuYLM89gnI/FVdCOgR4UZIy47HT7wBEqCLm2fTnUncB8zOEHsTf2c\nTAV8vLA6OGEQDHlPKAUjyHK5YZu3leTAlOFJr9Kgc81Yz+Lp4CAL/xOOmnLQ\nUXeXIu33mkhlgNt3ap2Rn2oDO60F2KxUsbar7B9LoCDXm/p6Zbk4Xovl9BKQ\nnqEn7mF+zjCYedMRHOV+59hGw1jGjJLfyVFTVwKXLNs4sJrQOF5Mx2Skdm23\nJS0CBUkTKsklOuVNdujOKlRWgqeC2+G8OJsZzInMgEykmmUsfhGxLPyhTTGE\n/KCHpzixb0HEANvc0vjJGhZM4fQ6EjOep/991dIjQrWCsUKdWGUL1TP7MS4l\n5o9rO+25FtY8jw9fSzg2ikQmMNMDhUUTuqB3l0YEoWgsgqGlvO01ClqpvLIV\n5LAvtRzcbKJSTnziDmgTb8im31aPK0ImhqN8KjmDmGJaBIcLJAtm3v1V+gmi\nYKIC\r\n=Elpq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpAKsbjr7dSzYra7DMdH+F9+O++sn4gfYPRIYIm/9AvQIhANJTi1GEG1jCZU3e+9+ujLDUZY1vAT9PJA0bpmm74tKC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.f50f48ef.0_1584644113928_0.861675081149931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-snackbar","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/rYDuQP+07ZLfVlONsjYEPy5tKMZn9ufTYqLOqxZeZ4r8MsZrNbmys5Bk2EBY1tvYUefuicaR9scgqhdOO29yA==","shasum":"6fcc65927b07742eb121a8303e9988a8ed240de5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0-canary.134cf877.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9huCRA9TVsSAnZWagAAf84P/2M/paFyA2gEtPHO6z6H\no2Ule5ml6PGRv+1K0+WA7FF0txKvrvhDcoicbv+IWWN0aqp0aSjh/awi2j5l\nig2ZIA0wc/jt66yca2iaacLpAZVJaKXrT7xgaYmNA2LQFRCz554fIGVBX6xl\nw2M26mRzK6ovgNbxYCDgr9EFBI6os8XGArFKG7uCqHHt0N+e88niJl4s8uoJ\n9ZU7n2GQl5lS+L3D/YEeaBuket8qVDHCidIsCL7O0ECz8bTyYylAvgo9OzDI\nPwxjKT+jOz6OKsPWj+MPlcDSLA7ccb5GYUTGNPg16wcWiJK7Zq0iD5HZ6+nU\nqJUvIyxg8QQ6TrjXfHfqhjL2F4Lf9FQJDKrLUhr9ZzHIoF//73SBru6Hrk+b\nMN0nZ7E8k6zyXhOLQkA+R3BFCWq/K/V7dND8Df0zPOe06OrK4avgCGhxoN+E\nzt9ud8sSLiprg+4nJzKAsMr0cCJhhM4kjVxaLL31c+c3gpfUiPmjDNtgN9jt\no0y8/6KBmT2QVX3O+FvPkmNqb5xPdQN68r+MGKO/5Y1yQ+uIOwPvuoYN5Aub\nKhIk10CxqckyjXGM/r+hbe8lOonYLo4Rle2p7RX185fLmiTk9wbaDI8wRLgv\nHA/w61kviBEl+PMOUjB7J/FvypeDv1d97m5jEkyO3rdrsd76Eh1GptybuQq1\nHmpJ\r\n=JA3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdXuabyK+AcnHfcXhJCnRz+th8BxKo4Y86gnR4wBAFWAiAC6N49TD4U7F0xUwbyN62wVnXvOsa1YUz9ogsUInMTnw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.14.0-canary.134cf877.0_1584650350047_0.34556475646014095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-snackbar","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/snackbar":"=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-snackbar@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-HAdDOcA+i53XaCzQaxi304xzTzDAmsClffggp2990pgXRVhfyJ1413dHaDmgs4pAOuzicBGoF+GwC12cBd/JjA==","shasum":"6f5db76045f70972ad13c4330bef87dab94e9f9b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.0.tgz","fileCount":20,"unpackedSize":82141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QCCRA9TVsSAnZWagAAtaMP/iT4GWb0SXlNXWm++Kcb\nxCTZ9rE07NO2D1+MPSbAvYdCacmJOnSaFdZeEcBizspq2twkFUtswocgVbGO\nBO9Mn+S6QnANx7ElpSIhiPt5LT8Wc26o67l89GYoq0jiB7y2e2TnbBVDRl63\nwPLhljxGaabyLSqlz2wWX+0qvygcaRnNpCzK6EbBlaJFuOWSQc1kDtaNpsIF\n7/GNb/Mu+FNaqtSuYd0vZdZEmfg/uU9QDPPaE4A2rlMLLtDy2d4M41eifMCN\n8bJ7PcKF7XXgL0aqKjeMszsJ2tU5+Jq4hZteaGle+7N5JxFPH3AsU+sIy2NU\nLm3SQLCoVIt2gmKaUQo6ZL9rano802oNpXDDBToyuH9YsRa52JCZ7Kvfiv9n\nPJKAPzl2/GrFu/atWx/MsjRR90xHaYh2bQJG+PNhSqdwWBYyGw2r9s83d4CW\nW0WmqmbAIfUktXAe+q56g6fo9QbLY2eXLnc4esTeEa6lbGlL0z+3BmrvTkOv\nexAqa8hGRxbfwpsTFKMYK0BCz4RLYpy+/3Njv0E8g91+Kz69/aYeqpSvfRnY\nMvcqmKNVve1xx6SG4CIjTR+ZjzSeTS0Hs8ZdKy8PJ5Qf70dXwhD56ev0w1Z1\nNfhc1x7urXOCQ1vG6nnLi8EhkYeCuqITBwKXnSuKoE6aRFJe92QUnSXRy7+W\nMaPE\r\n=k+pA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0YPuOUA1At/WsH/L8xDQ7Jpafmh/SiJuA9oH3VS1ALwIgYcFV4OgFK3riO5k4bf0TD0/6L+4q5cWCOTIFeATo+4c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.14.0_1584653313533_0.24329127128951056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jTAPRm7vp37/84i3DRuwbXKiq3rQwAI+BEioOJNCCzwk6PtbrT1aiI3sWDXv5ujsosPZ/wBIedx136jtVYMLvQ==","shasum":"9c33701b5b3ecbea5f8b6087c66486235d2d631b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.2c1a4913.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mfCRA9TVsSAnZWagAAba8P/2wt8UgfKEjm+4LaXTzl\n71SvJBqhLa5kBKRnk5/+wT3TmwuI7JXw7UL9nZWLnJ5+fZ6j0+gdSIdLC3sS\nz/OmyegfTCb6qaHBTjcREJfQYB/f3btYNJD39FLuvEuSK6NfEgbb9nuTPbn/\nWW0dw0QmfoACM0JmwBW9jIqE5Yaxemap3EzZ1+U7CHyWL/mu5VBrMmvpGjLE\nRMmEYVgbNDPaHkyoYkk9WiDAPGmzCujxzs1sc/K1xQDBo8TS8DyzYnGm7Se1\nmlICKLMLVoUUdUUWdXJqa4oO4hfUcG4Rwj3e6V+a4tGqP9DuInBxdxEBvyAD\n+bGLW8SymIfnuO3wuAvP6JWnNmWe2EkCERk0esz4G3UDARsxEHIwdUhCfH4I\ng7jeqXnGBkpc0OSOka1sZpNFJVQcOnP58drlR5m90AVlrNJWtTBMdLZQXlxq\nB1xvMY7vPqRP9yKdEvOxmZbIaEBa86A17gXHKk0/5/KeraFTEMnRaXJtOnp+\npjkI3TcP7PLXfrSHrwq8VFYGy0h8XUfPIMtFIKoIebHdFCCYVWvML5NDyUlQ\nkdnJgO1IhNiz89AWMgycIScl8UWic8pH2l95Cmfpv0/o4rL1Vw2WFMQjKWyO\nqOcYpobaq2z8oJJqXc09e96XMsEvqhaA4R7HruAXeo5ZMf6cUwllkCQg9K/z\nQqI9\r\n=OBdu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdKNR6E5/12An8bk6fLbTsyxNVk1WpZzggAKWY/7E4eAIgB81Y3QniIdkR2DukIkfksUWFsjm29M+me2QrTFJluTk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.2c1a4913.0_1584658847013_0.8338771038059603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-HZO7f9P2rZz2oEtW6CpdDc7gvjvdSmm+4WLpbcBjWjiqrCXhb8/zEVM5wJHpLnKl2v5edQCoWU8OBodgyLjmJQ==","shasum":"fd1a7f085511ec1d3906f10211525b4a8946cc26","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.3a6e481a.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQetCRA9TVsSAnZWagAAPNIQAIhgOXVCzbuBnYBd79mQ\na1g/J8F8lq2C5fwXS5aCfCIlxrkH7iVmcDBAWwfSUc7Pwg4KrktXII4Xn/bI\nMTW8HuUgamzzNDMTcQoY+LAA3Ro5ZFvos7YRuXWAkk6y/416AhoYpGG8iUx9\nQPQXMzT9B+VW7htjdqhKPKhIuF/6XjRRUTfwiahBhsSRZKYmHgH/pyktZhp0\nYedMpzwlt88Z2QgQZcOi/spUGJmuM6ZgBBT2/j2v2v8Rcg83hMeLSSwAmlu+\n8mqSxGzeAbk5FpYNwchtJnc0cnN7A10BDr72qbf2zZdc6yb2LHmj99ZHzvVH\n119ceTRAK90eEo4sfVj2kIa4R2ypBmPq/yJcmPa88RGUawkdUpSXufruw3uv\nhPlg3SdNcEPQD6uGPls9XTja++lZfpLtGVPk14gnujKElYa4fmitTwgvbLsX\nNmVQoWW2tft7tT61mfaoEvFYL8oNviBHHD4G7v2G8yx31QrdIxm7aRXYePXH\ngb9F1uv6C7HUpeDHOWY/WX1HFyPYLWsPtZNsFIjyyPyV7uNFuPKKvRZknhpx\nVnPVVoDDjluk3YOUs9EPCx3zIwnwTiSyMJmrHJNrLQtIizbRtDoWGF1i6uMz\nB/+916tgsoBD6M8n43OI4ypAnY/0DAmd8xo2sWwBKUP0WOrPdyEO0nnGqLnR\n1DQ9\r\n=rrrU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSwHcbf2uGDnhjVGTSZwLDcAHgIGGkphte04udjmbjMQIget03MlKZliOLT76VhAnl+wkeShyEACB+e8XbNdYL10A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.3a6e481a.0_1584727981514_0.14920116041951248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YfHTYMDpjMtS1CMBh/hPCHSjqfBo8CEhC5XkqnusUr3KGYc4f3c6ryh+2UJCAcG3EuXQmqPyKvGu66YlPUU7uQ==","shasum":"16260a5e74992c5055aabba4fcc4e82f99b2005a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.603d6eb3.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTcuCRA9TVsSAnZWagAAsvsP/2/O4nthObLU/gsNSwU0\nRZHh29hr4kv+y1U47J1qWXnKIK05bNtdgEnbeIewwujL3/dgbjh4elJlEYe7\nCO07ytyp2bLf3dgYSCBJ/4tIM4AMs7HG/78xdrBGL7HdJhnlVXnwZub15ENh\nEv8ZQsOnjKXt4QPz8r8T2+PEkU+Lc2Z58MjRj7GB1FJMww12hebcGhjXdt1R\nQWkmk4yjjZUUHOMessgaI4NVyfDms3pLw8nETWTiDYH4Xbra6Bs/ojeuStUL\n0OEXK8e91zqpOun5dZjCN+gWUYsH9AY6/h8iOCionPzlGoIaJfeKJBq4shGz\nzuqC0UXAITOjvs+eT7JCef9E3q+H5QhJB0j6vvIPsl9bDl+y4T4AKWNt3CS8\nTiw9C9DXlap0w9dDE+GKpWZo6RjqfZFGEp1fVQ24qLDxq1ZfIuAogWCnlSMg\n/EkekyhuciKk3BPNtJ3egDxJ6f7h8hcPc5KYzHNk3qgv64fyQesi/a+dHW4X\nfIGgdczaDPkCGv5M2FFezvJIFTYAYDkdOTcXBD5LvSCeQOj6OmxjtSRsKQyu\ngC3vAPINmvhJHWOFGvmlm8napDiMDDft7jPfyRx84xAGaZWXC98t6Lf/82QR\n1o6vOWPmKlT4QBB6pNf/zm5LYvNTv+5SwBW4Q27Fu9k7ZIQ4cu6PwzcUimhw\nNdhV\r\n=eSX6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+yTc74VkRl0LYTNHSOD1Zdcnw5lYJXZnsd5sj673k7AiEAyIICdcGCF+BZfnI0v8PmdhvBd2xA9rJt33IEoSSKxaA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.603d6eb3.0_1584740142426_0.7358628802868825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+mJst55YJFCeb/QJ1ve5sy/yYckkunKc58gKQpwLDGMVPsUD0dsF3VimTAjtzuWPc7KtLroNfqzx5XQ7GWeMAA==","shasum":"8982805b9904a467312f504bb8aa0b428ab2edf4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.05c6a93c.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWECRA9TVsSAnZWagAA0vcP/04ZrqmtF+d5FruxjVEi\nZ1RbclALatVNvKz3k14OryldgcFMhbp4gU/G11JB9ABmNOWkeZtqdToieACp\nhHxR4G2uyIrY4kWGC2ewvnB6A1fh2l0Qww+6rjY7k6aoqamAVcWwifx4Zf/C\nFFyo7zK/zvef1zCyb3Hkg9EWpk3d1taxUSg+70/cCpgr0aNgE9Y1gTmNkRAO\nrFotnSMoIwxJXbm/Osoy7LH69bBH8kdxx3xt3o7F85Qp8fyQgQduBDpKuM5E\nmubZDERlz70c3rB+FJ8FvcNBl5I4gDZznKuIgjhTHt6jNcY/UmlaB2gAp4y2\ngc5/goBI2mHCopI/vhVwYtLNYIIp8OaSAjCbQe9J6tWguOhUdtGJglKF8lnA\nJOFRUMA/XF5hgxuuM5/TKJoMou22Ju1dGZsqpOa10Yi4ui3bkz66EetD5OEo\nvN1zDsPNcFxG+XsN3XrF0cjwkQzaGK6SmppFNTvM5K3gECbm5UOiQNk1RMC7\nURoZmUyf4S7R20BqII2+MRT6kc+BETajIMygGJOUnocKxfxdh5zjHEGQNRWc\nPiwNMYFR/FOQToMI5d4BBxUygaIFjER0aac6+25bbjAeNdJhJZ/7ylMKzP36\n6XjjcB4JPpwxw4xIXfJgbThV6lvqdva/f09kCFzYSJZheVFJOrn2GThAVGUW\nzeTH\r\n=k44l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEo0JVWhegg31cNvQ/BA0g97wLCUJyO8PG6niPLMa+TQIhAM8oWMZNfUhvpmuwuD3J4t9q0SAUbDIyZeKVrzSmTtkH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.05c6a93c.0_1584981380455_0.6517207845523822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-snackbar","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/snackbar":"=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-snackbar@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-tLwJGawAY6L0P/eI99CQahjSv97i/ZKhGH2pKB5ANQpNquhP6GBFE8Ghigx+DZVJWXazJ3nqzOzhLylGdMnOaw==","shasum":"3c4b6dd5db5562194ca01a08b86433cf46415197","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.14.1.tgz","fileCount":20,"unpackedSize":82141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiLCRA9TVsSAnZWagAAysQP/26vME0xfWGxgiwYbuXN\nVCP7FFzn+rKgSiE6eYf2PnnBCjW9NRJV011onb8efhk8htuYQUK5CC/499Oo\nStsXKF4Jf9FIQ64sCcaPVIPPRl/Y7+Z/Rl7WVNZFA4vMAnfaX+owtlVlrUQ1\naufJ0bpPYdQBoBHNEelmYaCmZXjWD7ZgQLEePiydS7zgzpLsmIoOcsdr6eso\nahaE+0x1G09M0GVxPQYfV7FCWu4i19l4VajqJMadFYzcg9YRxBKlaysbXOX7\nfYLWN4bmluMETkcqp92LFEaSjMAjbKwLpQo9zjp+HcVGqCPVGMfvK3zGzPTj\nV2ZDEUFCDCMoX+bIo6jjyClPn8rJlYQLYrRGny8ZHhkKGM7jn9peFV15PAf8\nvhGINTEDUVMu2YfVvW0wAMNs57mcOfjGOIflpwNPSzhlU53XqrdfNupjkw2n\nTWQO5pMa9ID+wzAvt1YndfPfQEcsqugY6Q7G/ZnarmHXePG48r2osNMyXHU1\norLOx0m94NAfd+SMah2FNkA+okm+Tfpu5H8KkZfjHIsRDqtOsSarOX+HfnF0\nVX4ptk6Rvu7x5MAVd62CKnOKQw/ZLYRJHwedduLqtGjR3Sr8leqzuwTHsfz1\n+ZA7HtcbHE4PiLwrUbTs3OIuyXFIpiF+5lAJq+hiNuJh9m9ToRSve0MMDxl1\nV2O+\r\n=MTPp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDw72p0+ZjlSOzRTlSJGTXdZgqHQux04qzFsrmckKXOYAiEA7GIc9gst/09mm1o5lwDFhsrE4GiMKkLbFr6AzuK0Fl8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.14.1_1584986251395_0.8911195873824311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-uztcIgWARUXitd5hE5adc7UyV92OwEyqfueJsFeCh9witOndI4aCnmuSUQf/AZRgdU3Aa6P2r+/kj6HDMb3mFQ==","shasum":"2334478c27b0a11011074c0f1bad8c94bcd6888e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.4e6be3f4.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSBCRA9TVsSAnZWagAAM7gP/iWF8y59bO/Tegmi8odu\nPDs/bwU9HBUEs6clzKfZa5h9kUFfxRSVG67OiHlYa8GABjIvta7YWVZDqKI2\nzrzaXZR5RMcO2FOb+Coj+pmuagA0bXK54QHzSN0ivCOx9ijhAcx/ZesnumTf\n/GRgurGsAxB7y+HlUPqUXq/U0sD17k8yxbohz30pQbhqiHtwZz5TcTcGdxn5\n5P5oRMlBgOUCE04/PJ4pWJ+O8jT1mqmDh3irnMTulLaGqhiA4sERkLtNaO7M\nENbid4G79kT3KiiJkUx0M5e2HCRce4Z3h9opj/STDsxrQKsahWGtNOpsrMQJ\nqRocC3wxVIfc2x6vw9aFp74rnLP1gSHKjvGTVCLnwCuywNO62fprxqtL9z8U\nW9mbip1PeLN3/o7O4NRxJCMSfAPfej00kAMuA/4btrnj8QyckLLweVHYYakF\nt2L7FDELWGlwknHc7blpi8bfoBKOFu6FjnCphq3zCN89GeuqUThqDq3kANfJ\nie4MqAelCLWhXv1z9csIPgKMLoPV8rSty99Eo8SGgk+gmekudJ6td/HLK7/8\nL+UeMKKo2jlY7ylXeJaRMqUkXKF8K5Og+12vHBkTg2r95jjHvs0c5izWRTZf\nrfASo+eg8DCyRb8XKiPOkmiYB0pX7ogsA1DYMnbWKIQSlPzqgUeKDF4uDcHY\nAG5+\r\n=f3pV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9U8d8LFhKcmHXesmm0WwmJAAhF1Nrq6XsjZ1/6JFbFQIhAKMLrHT7//Wo2GtWbWePbn2wUSA8s99d5dItC0Hq57c5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.4e6be3f4.0_1585083520740_0.3253950816922382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UZpjyEf+9GlTBUAFAuUfMzH1CDGzSqBp3gvXOFmkA2xUHI9ZMbIeDHV0JKfemI3KIjZkzqnR+243p1svNdwEaA==","shasum":"c3c77ad9d610894c08c22c9183d002184129cdfe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.c29a683d.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenisCRA9TVsSAnZWagAAND4P/3n2gEKEm1fg64PglJw2\ncshecoQZlPSpRO3rLXeoR81q3aus4D8cH5dYlLa2Ny88sdG94U0rUM6pAFga\n0CAi3KjQSf/s5Sd1RtD1g59rPOOUfvU1I/366gIzNSScKU8PBhw+MNXa8fBo\n6L9aFhZLAbB3cWKTf+IALLe6jxT/cK5bPcyUtMWJ37Dfer25trPWqYq2cuci\nx4vrWO1dVyGbOwE4cUm77dl3VxMROpv7stgqBTsCbRriCww+VTRXLrvxvFJp\nHx7UXxVlZOTExIYOwVNDKnp/v/PI07bmP3pJ2ckptuGsxguj+4LlhCScLLXO\nQrlzCmLi2y7xUhfDwVDlNHG8Q44nuPPLxO6HTPDZKNRJTrgdSUTTy9y0YGOx\nBXSsZRKrw/EHQc61tMzASYy5LGRdEUp+KpBhDr0AsEOAaYgU91/0CMy5VZT0\n7tX27fWmP2Nis+zQdn7ATh+LfIXAF5yhAHKIPYz47UwyktvdNm9MIwpVwu2o\nFZBq1UMXFOSnHnQ9GlOEXSFoTjvjiWw8UUw1ChXy50s2qG9H7mdUM/ZHm8Zi\nypzCautvSlyd20r9HX+zHURhE3cIoG0jxMZAnJBfIln4T7hnmP+RT3Y1VeI9\nZE02vygBAy50/kfHODZPFyJrFn3qZ1YNbptNAREMXpa4xcb6fOnxbJlKnghB\nMYgE\r\n=et3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvZHj8nCMxBNidjFI5dJBzbT90J7YgOT9d6fDzgW28YgIhAJ1ui95IHaWEenp7MZRDN3Hh46F9OWCaMAf/xkfbgPSg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.c29a683d.0_1585084587569_0.9407481972402054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mb+f22cYg8TJZEX4iqzqqNwz7V7aFHwuGP8X40qB61YgZjlC0/YuymwOI4M+0NwsbaSlJVI+mkHhM2ZhYX+HRg==","shasum":"6b580f66580b5d7dbe48c35519c50ee6550a5d0b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.fca3dd9d.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsCCRA9TVsSAnZWagAAxlEQAIDo50OxBJlLza9zYbww\nOoY8kj04yTi7nC2/vUtwOvuiuAVHPtqCYfYOdoNUQxdfAtjQg0JP8catr1tp\nrOLHAwuQ5Kt1RX7MYNJEa0moDSugNDKeNtLV5YNpLVIlLLHIxyTzOl8s8j6k\np+ZG7stredSFKQOTsUKFydFJFjCIx19jk2JecYn74FwEVb9yDZIK+FpG3s4Y\nNA4nG897PMsFby56z/tpKQsWvAU0EbzAClr5dy+LctxrNc5FU2nbHS2OWP3S\nBI/CHFRQtQz8wRjWxrgms26IPRxCeMqGnt7AC4Sd21GmoUwgOSuoubXupLs7\nXgf7Jm00xnaf3yQcbHRSr/vkzCvWaNREHG3Ec5wzJaZJl26D5eC3YBLw0TN2\neXbVmFzIe5jZdgjwsmawYksHUazz+Bniidk3bjSQWXS+L3WiZLtubwS9v90X\nggmFdtE2lPKllA/cgkXXFFTaMIavP6L77SzOKuKxATupXffOYenbw9tTmYoC\nbzqx/8vTbvTJS94Te7Zg+hMKjWQ3c8TXNztIeVDr1uYV/+/dAO6npV42hU7g\npzoZDgEj+9NMnQW1plocfEbhJOkJRqENr/Ky3Oc4J+6BqF5S17fYdDW7ZejT\nN+OgJFcdi5fN7eZERq1PrNG6dLkd9p5Lthn5wQuIkwM3OJPQhGrqvnCVGh/I\nM9jK\r\n=TSox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsfS8tIuX/jCYYZ5kd9+dK9X3rvA997Y9PbydsbmkDOAIgUXueCOO8jE+DM3RR21df2K8EK+nGKYtqsy1wymZqqaw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.fca3dd9d.0_1585093378311_0.39456010753202997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-l1X1+gSOab6V7sBcB5gopjHkf0a0PiJeDDwc7BezM7+nOuxv1aa37bHXublbyjd1PYStsUhbo9jOstWC5EgMAQ==","shasum":"a5f11f163db119657b97f5217f44cf9685124753","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.1e73da49.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81LCRA9TVsSAnZWagAA8tAP/RMV2wPMJmZ+jeOGD9rS\nKLgZlWjeh/RrJ8LE3wFYvH0QB/AVff7+iom5Fz4o35AvNf7kcuH1KBQMFmvU\nuthBOVjopGKTTZ2Cue8ecMJ0Kw/hAtGRcZa0pLowlJXLGhJPW0ZlRznInJCr\nE1yu5nfG0LnjyLBph/7HKxLJo9TUAO0fdlSGHOXi9e/Ua8aYytZ+e17FqyNZ\n0CNZ/w6VFt5i4PrrsyihT6X/Uc9EjkI06pd13V0Vc73Aiq4QI+/pQSN6ThYH\n6kDPAfUL+uh/upvOtqlmJmxdx+yzIKIdk8hvi9R+J3jnweSjxot6c9vfkSh4\n7XXIWuYvP+XgcO+p5QTJHQrK1473vsG6DCOa3mxPMj2INQW5dpieNymzy6AP\nK913IQVXQzmdTHXR8IqrxhHICmGYHSuX424Jdab+LYl3jJlJZqThQUsBwbPd\nEp/aNoKxZc98r6Lb/eg6FLeM1zgW29lB7VGWhcZpJ15YnSj14m4AVGmn4HcD\nG4IyMQT+Y1UuwWoVtggihEzA3aJyxdlP5At9R/WJ1x3sYtGdDglVvztZmgAv\nVgLOU2/JE83af9XWlWz0IXBtkaRo3qjLz2vJahXTXPfWTptMYIBF4x9R1fwQ\nvhoxZNpOq8Oi/ZFuFKYVL8sK39OJvvGc4+oOn6vaSQXIXlgsOmlVcgRGDaSg\nEBaB\r\n=OCWs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLhtVoWk5MInl+KfTZ+tQc6+aI8hE8Tepshs9Zej2HBAiEAqejmo1L6Jypw71gS6C9j/NzBnw8yTj1voJv1fKz5+ZU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.1e73da49.0_1585171786877_0.3314689705047942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ga6TdRX+cqgHNp1+35KG+PEiv1GHF7Eg6AfTdpNjlD5WUi2kLUdsD4g7+DeAEDgvELkBgdBUg2NWwhOCi2qJcA==","shasum":"3c023e8a6730835576b4ef332dc12a554cca573b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVVuCRA9TVsSAnZWagAAKWkP/RbJlgdmGcLPBDniUXbW\nqyl/eyJErE0FM+SE3L3607xZP8dm89OGz3niRfJtZpzsb7O85JS8QTFODJSp\n9Nx/q4yGSfzUhVVezvjc+mdHObZV6DvQ8VEfiy0/98z2PFnrhDLHeKi0d2B4\n3jkQLQqIXZgvXZiGgE6ObCV38LqGEJ9b7GA9G1NfC2JQ1RXFhb8IbQbdH6Dx\nAVdi1v1KlA5tTItJNQdUzEbfzhixBNxRKm9GmrHEA/woXAy2MIO4Kr38B3S2\nbWcgtkSczmg6Yvrlm2vqbHhTe8B0CjZnLt2nokGXYDMOXL0U0zcgMBz/cKFC\nJqWm3IhRV+PuDoOYageehADl8aIQkCeNt7ZQbYXYx8IhWovyWYRzAg5GMCiV\nIdY9hpbcwyFgso0Ywhl8qR/tH3usNtPz68FaYR/nK7SyhJHzeDPsH8PO2/vX\n5QPPFp9CAUb5EY79IltnxshsZ7a+KY45vOKRKllijHXJ2xFvN7C6UV+4LsoL\n/M74gmR200peZkn5KuoXub9RrUcCOddZwlwK7qS7s+UuL94D01LzOKNuLYO6\ngisskrtjitRJSSLm+ohqMAtFpEjJJhCKgH4ExSS6prRu72d48O/WgI7U7uTG\nmMjzJwbuscrqME4XUbM8KcZekStxr693ewwmDZVP7wtjc56gg0F8u6NORaTI\nFL57\r\n=6GXT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjRdXzsdOGUFMVaE1AXZ690wKNgZq2lgENEMEd9AUgRAIgTULkuPuDcNoHO5f72YJhq/lnOnKzGe42xSIZQVXnZxM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.bb6dfc5a.0_1585272173779_0.18500539845415864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JqecS+BL0pi/aSU6+cFP9GhbzRF10UNfC+q2KJb0vpjOPHzt9fGHJyfFhL+JyhES/xFaQt9xhZPcRJrzi4RP6A==","shasum":"1fd27b4789c2af0a417e4876f566c303bd28102b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.1884603d.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflojCRA9TVsSAnZWagAAKH4QAJZj+xr6TeiU86bNsXWS\nW7/O4xPCKaBzgEfNlTGbKNzJIHtCiUu8Jcir5vs6eD4Hu8YN4+Wz+MIZa+4Y\nVpZnqIranZB1TYGqxVCaAXloq3eViiDK5Ij5NyB4euZlTxUpXMqIWodu/o6h\nPypD70g1EkHHzSPAakd6oTH/KAgTA++NPn0Gm3peitEFa2skBGYiQjCONT7O\neMTDgVJezo8g7umnwHf7EiSE4iDdECdv9KVea7eBTvezDpu3Nwiyt/o0Mw9J\nSbO/BTC+gmWKuzL2qW+dhcDO+JQ+2qPkewFVLrztpI+M4+qG2JV4WqYMdZto\ngjTG0c5iVWwRMMCdhV7V6vXPPw6RwFxJu95NFGztUdP915hwK9xGlKXlyRP+\nqMQzceg0J8N5kKTMmid8ECzmvyLGZ1nDP26TXWixv9vfkcRg5yoBAgB+vPtB\nDVX2wlyVOzBpLbXQO5MsUHoH6Up2JYYPsSv3zLXW8sKzCiV+VzMrMJLzqTBg\npP+UhyjdMXWs83mCIOrQrKEFcmbBPvgXUrWyH/4Gn28Uccd4d9GNshCaX9Zc\nb/Kz4EEmhhKyaCAyc4wIDhJ7xFIhqYFYnHZX+IqIzWp5pyxBiKHdRPlN1aTf\nHdWY1cEHv+04i9If2dmrqCa60pS8x8VehP7PPsNB6uWPBDqof3c5foHH8PO/\nOK8s\r\n=sxSG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMFPcIl9PBofwAKbhrC9w0nasXTtUYiFjrDvU2nu2kvQIgLCPKB+sjRBRRKGUCc1bWVHIlXBYjuOtY/dKGy1o7E2M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.1884603d.0_1585338915181_0.8862655580185348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-awkW6v+cS/jlq27oBG/gGzKJ110e1vrYJkdaUCNh40f/Izh2nxHw8ndCKaK9wGLXQ1xnwkK0efyHYwz5ayxHhA==","shasum":"434ac9783219e04d02853e1c409e1683b949ab3b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.aff73cab.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyjCRA9TVsSAnZWagAArygP/RtyAbr9UhqAjMhw0rgk\nO72kigr4ZLmfc7NCj8Odc4G7xwpNObdU4NbC7+pjwuDCCGXlWrb1FKkcCG+O\nl/uyOJz1tPRYLaLwuOJ9h9wE1ENrnc2DM2E6ASwjRMjNKeckxNtQOyqGbDeS\njOWnnYpmSTYVUIA4vOnkzdMiAfXqidEmoWril0z9DrwHQxQ/Fa3xkKb2wLs4\nzr/xHFiRrKbL4XWINyT8Oe2vgsUzHsmXLDYGV6BPnGQnyHGRGxJtHyEK6NRb\nycxn84agWY/V1Vy9wwgzUqGvBvf8bfCd9taIKnm9NaAdzyHW/mPl6tk4VoaL\n58Kj6wGzyd4e7LAKXJWfJr7PD+Lin/c6UkXdv7WAy8mLYNgN+FRN9jaiQ6V8\nMQeBPc6D2xMaltEpplqvybIQDRdj0d08URHzznrmfqlbodTpvt8SDW1I+2zf\nKby5i3njfoc3KnycEg0uu/YgLi0EKcI8JecbUouU+l9NaW07E5zgj11GM62u\nBYyXRn4AKlqFfmcWfq75bIvfGLr4gM1LTZb1O96Q7w0Ts88E2H/EYqePhiGg\nWW6d2rrtOh5KaVj9Zd3HzEJ0QmPjETA5gZUgzlQYgTJJBO/iIt23CzAP07gc\ntVv6dPIGCCImRCztKw/2CMqlCZfAJw3KSxOjrcpqQxQdvQV+/7NkrXcFeR3A\n045C\r\n=r7NG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6VVpRnFEWEbOFKbxxp2apMM1XY0abI5ysPtLIJ3XrxQIgTxnbB9xwP9DnX55u0/7AS0S6/NydACjPzW7CgtWaGLo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.aff73cab.0_1585343651455_0.25821714577659516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WoeGChxtmS7s7lpoGqJj6+US+jGF1ZeYVuuPtXiG1cZeX053/1NFA558Ntw0iYZfUJRiE17AziXZdZSjc7Lvgw==","shasum":"9164b33c77805a96015095358d8011f8d6553a44","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.63168f61.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gBCRA9TVsSAnZWagAAf2QQAKDmQm2nrBkrH8Dvn3gZ\nujpg2s6z/M/nOGg1UBxxXGqqq0A1SQRLQJZw13QtpAolwB5Bf2hwNEJvUkuY\nWfaKUjT4EDw/MofnN5aZEY8uCpc7eEEE3hk6Go3FX/t5jM3NMJjGGMo9wgB/\nJu1yY7ZWauqKM/SMB5O7M+CWTKDjeDi3yDL/Kw3i69/PQG1vCZyp8fNJF5bj\nLuST1cmp0gVSj54sRaS5WixU1LZpHMYJ+Rm0fdzo2NUfEoV1P5VZzh/Ha3uX\nL8b6A3fvq2YjKZaNDEUK5+vGbl0qAh/Mw/wiSqf2TQ1p6eFpNGfYy36gbpiV\nSamA4j+HdaRMk4mRRFQDkm2p5Yazj1QSZzfDVWdRiAChNWE+mXP6blkxf7Y1\no7lqwAJDVDXlwXRgfTjikbAruzW6LueAu4Sg1Ke5k7CyE1U0nCYuTAAojZ3n\n+BrnPgTmomhA7K91VwDFKikBmdK4bIVR9yyrbbVn+lgEnfNmE9MS65M2nc7M\nJEoEalh59J2QDcP0RNYc63eoFtNox+knONP8eLx2ACQMJIhbmpmdH85uVcAL\nLhu+cEeZedJAEecLWWRJdeHwsBAz80C4PSqjS3baFT13MURZhYMehJQAzy6u\nrJmrT4IoTKSwUE0sMPPUpVkFXfNLl52CF9bQlcZJjt3ENN/A8d3sfaKmkBMZ\nMG5K\r\n=hLDy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkOMz9TDiwrUywp1/uyAJh0bBEGjAencp97HRBvm/zDgIgA+HvRrhrsX5XEDarZk9mBn+Xn65xjYlLM5s0NUgGalM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.63168f61.0_1585678337132_0.7070801124085133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2M5ZwHNrzUAuMUL6tBAJebtona3vEf1rCFsFdyqatUqsXNYYbq7gajNTOt3HfEuq+Eb4v/sS37nzeT5dDpTH9g==","shasum":"4eac8ed125c545b23cf68fdc4dca02e1fb41463e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.9fb79b3e.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QECRA9TVsSAnZWagAATykP/2rdxqb5vn+7Ol/BKAhN\n4ZHHshlyemM60K3lwx8orMAijstoQOOQ9e2V16T8rbhN7md5rejk65ZPqvL1\nFiGbVdLDvBeyV0MG2mYBNOkSApqVTDXx94x26NgU3j9dgPci3U7v5UuxyaHh\nys4ceDBqnWu6F+wjciZphUgtd3kKck0HCl+hxf9+QPI8H89Ikzi5J9ZU4XFV\njm8TRHkPG27haG+mAzK5bqO8BzNEEiRVTalfV3saGqnIFcKIhsfj84R/k5g6\ngbLB9+2mkvU3Q+ZZyYuxnQsvNwKPD538Bc3GPDZFHcyjbtSan/fOk/7t71cP\ne6Z1W/xpwh8UBqFRl0gi7/4Dc7HPsxeXKngRwNTGJSK9rftDhjcFolmVjTHC\n6I7WMxs4Tg92vNQ3MCfH6Rb7fiiqRQtaHxciHDfGZd0EMzTFGBMIm61XVO/F\nC4aNAI1xges3FTRzsj+V6yQgsWcwdGrx7aNfk/E3n3iDmprXc1vh6VAXJ6Of\nm2XnmCXN277GjdwxtWpPpePsg1l1wSMr70anBpFtP0WeWyp7bD2b7eVMdfCA\nr4TUargfb6D8wJ74p1CsMGf5LZRPcC4U6P5VV6W4vzhrz1NjSBf4jpaOq7ty\ntAU8FEDTUKQJKmWnPvdYgMxPKTirTlzZi78z3Sl4QnZZ6ELAgQfMIeZ1Rych\ndokJ\r\n=e02d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvo634HM0bEzpAO7kMyjuDhF0UpmetlX4FWjpvDh6q1AiByw0s1y7OsuAigT1bcee0/TnMM5+AuhbSU0HtKbaN42g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.9fb79b3e.0_1585689604204_0.7364429052195927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bOHe5O6vsD6nmOTXaOp66oTvcS7ojSXdLEquHZn5HEtww6B0FsmMmlsvRc2Ji383Ta00J9D42NPcoJ0Jedsatw==","shasum":"619322df272339b77bfe82c278470f1b932fd41d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90jCRA9TVsSAnZWagAACxwP/22agyy+AEKO2HeMMpvS\ntWmIcROhzRa1gtq1F4sG66KpWeFRU65gju3N2MKO3bXHQLrJpubL43lzX4RK\noHnJlgJFKhF8WQ4X6g78x2YBnmmZn++1HtSQErgQI6dGCnsSBTRkQxYd5PHf\nUXNy4Dish9eHS7EZdYCFaYE8YlOOUucE0sS/TGbFUj1vsIEtGX7z8nnLvgFh\n9Smx6ofMT2+hqBb3KCDwPivdllwks1BjaKUnw9lznOlNozvao/btIeDfpL6Z\nmJuC34alQr742MY3aBOyPpZirCNGzp3xpLsgr6Waw7Ro+YthaFUS+VqkPRM2\nyHuG+trFmCAlMDBkTkdsjORw+hpChboPLLVCjUJ7BbUudajpq1qZ4kNCAenp\n9DaXC26+Qh3wR3MsqCvcRJK2UgFrkMSUNvQjbUfoX6F3ZpNjsjlO51KeSwis\nxCHJQ2oQlSSgLRilItYH6JTc6BtnbRuTsrcOqLDoP3skFbeBWm0XYs7cXQ6i\nziEt0SymVUCpHe9JYSLj+1+pzN6QY/dCkB9DmhDT4pvkJYO3ASsY9zGNYLNY\nWlNt0x07MOWVGpQgSuTPRLnoobRz+dMtHL5TAKW2KC3M5RM9BNRfY/IVaYlf\nt0RyLFF3EWfGPJYZ8/vR69FASob3F9p1pnnQWyg9JaVLnrKI6erKWFyKMC4K\nzBb2\r\n=aqgQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsJSKLTd5lWniOGMS7DQClI/EsTCoUiZFPQoKC9lWU2wIgLtDuh9EPCIADxGz+NGDqng7rxxItpeUeMxd3ATiMhHI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.9bd3e9e2.0_1585700130915_0.646150122912136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BxC1gHQXE2vFgqT+a0E7tEqplztm6o6/2g/MfRoiSB0Hz9MtNPzxrb2+5gwG3yWFStShzQFqJQa3y+jAsZUNyg==","shasum":"0128fe3c1f03006b73ee2a79c5d77d6ff6c6763f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.072084ab.0.tgz","fileCount":20,"unpackedSize":82174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/kCRA9TVsSAnZWagAAqcsP/1EPJtb8Zfsp3oV4h3h5\nNoAQWCES7W13vAXR8RNIgGxc2m0w2TjrYQia1aac4HXhYBmMhzdd6EohYqas\n5twAapDl0AlepL8ElduKoGduEJc1Yrn7tYNm0uFaJaazf1dDYqje8VFvaK3d\nVNg1RwyEvtIjRCKW85/UhlBZHX6oE2fIbYY9WYEPveh5fEoEaPJUfNQcAukX\nEey+zcxkdaKc37MpiahIObjSAmE8DO6KjkSD+lzZO08sKTv4bWP48LV+JSJY\nL7KkpcYdUbNZE+/yQ2YK5DArET8GOaP/nUXcmGsBrLXtXYiAQEJyks3oiagJ\nDiBSd9066x+xv8zTspH6h2jsbwgoB27GlWglqmpEId8MXnmz44xzj8cDNQJB\nwy0cHd/yfxgLXJqWH4vjCCPMLi1YPPP3sRvj/AVsX9IAmw84HEEMmog/VWjg\ngDP4kJ7nInKUBMioMWFQURmxYve/zi9+peTyjz8G9aDWY/elcB9VlhvbBN3q\n9sHMHx59PQ1IHx95Zdt0pY1olzyLPlrKoT9fpC23QdGN5FD1nOJ4CY0GH+4g\nr8/xoJTc9BzszMg3tf3F06QKSO3bOTX8nTQslUquQFd8mVA2oEphzFSayym/\nXIUK7OdyX+LPSchrYWMty/U0KBFGhCQ2Y6yh3as76NHJcxabNsJ8+Im1zPLh\n8fNd\r\n=4jEq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrUfeSeFnGuZLiqoYUJvIUzoKPh9vbWodqx9+NX7BFNgIgGTnfpuSwcwSZZExW8S63NpjWilCRI0SypeN4sunUwqs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.072084ab.0_1585766371758_0.9195098968284228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NyaJCNP+G/QgxiiGJHDaH8cLr1C2cR2VpIY75+MpJMWpbk0fivPpUtCQFdq5Ob1q3qAoalVMK8O9+4ooVTYLyw==","shasum":"a826f612716dc5345aae0d4b2e73c08068f8d7df","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.4dec04af.0.tgz","fileCount":20,"unpackedSize":82174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5ysCRA9TVsSAnZWagAARpAP/2l0kv/MECCUx3DfnDsS\ncxVrNY9ofbZX0ufuDPyY950UfGXp/J69QDD5u4Ju+5l/QB3sTDrszVLtWsrS\n7INWLB7+63+YKJtCEGw39IUV/OOe2C2B3qw6Uve8FvYeFt4P+ATihs4UYgWS\nvLA/UQJCNIJpeKZ11C6ahSxSBBOfr80VLPv2dGtlZpqfZCJNQNh4xw5cRCF3\nYLNR5s+um/XmTLCMY6ksRNuzeFzpFYHBgA3XDoxfSufT6Uc0JYBY5A0UsFNd\nR21G4gNqWZw3Z8ljWWRqp9t7Q/lv36rMmnoM3bmvknFOw1zMUWdriTc/Sgcs\nNT0K19rJLVcELMcpOCK523NrJHR9givcWq8OTPL2NYFpy/yxvuX+D2ZU5VOJ\nlkAKd1mdoYx7ZPJloE14t1eTnv0ZYiLxBNCv1RVKCTXwCnBsCsBDDFH7KJRW\n0phNcIKirIqQMbj4cLVtpTGCEgDGC3HsrxuzBhqW5vuiDEVa7rNnKYs+3zKQ\nCxo+DQttwKtFiKkuSwgNd2SKsOU65vPbEnlI0Bd/8r5R4XoPd/xS4hw+U5gl\nkB/57v9UA8HSk7K7fxsAHiCR457Ii6ht7PQB9U/VbntdkOBiK1NWpCmwJtEm\nzjRKPrqalk8ghdawTxBGETkytsKP9ougJWJGSlCb6bTcnnsS/Cg5nv6hi9KE\nEkjt\r\n=jLN4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvkynmbJccJp6dodAwdiZrXMLgMLckLX6eaJ4EcOKvWAiEAxypGP3WXSBVIDXZBrufz28yEEk4BHe6WD/0FIerjrIg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.4dec04af.0_1585945771625_0.6723199027120874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JwPjA99ks41+isyfbIHWfCZVyABfR1HPxdesR3so+foxlnpUlic5vZsA3mr1lZaNvfpYude/Rn0e0EwqTwKtCQ==","shasum":"648d0199d09ad7eddf54baa51bd0a241393636c6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.9b676354.0.tgz","fileCount":20,"unpackedSize":82174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y/CRA9TVsSAnZWagAAQvMP/3MmVpbKXXvHvLgHCLTd\nwN1y3vGb5hgS9hi2mUeAFV5dON90gWrVt37pT+M1L1OPgZ9BK81ATgiOyrXf\nMCegKHemCfJrVk20gOBZYuRbZ+SbR68sBIaqvRHxeCgrDZkxDtZQ9XaHw1Vl\nFF8FoLA8Te4yrLUAZcxcU8qnA0EM4kTaJf4M3xXJPyQWozKbSDcoAMV+O/Ee\nJAsLHq0ZOlKwKHW7gjhXbactlvR2hn7Z30I4X5rLNIg0u3gOEwHhPqrQKS49\n1Pfv39EvKgwfAz2KQKglWTYd4oqwYQlKxQUz/Jguy+dCtq7fPGQephTekHG9\nTcE605YckLZhJ1HlPI/HJ9JtS+VgD9ETwikCo/jTDW05kwHAbQC7uDHU57Pr\nmZEBw3hj+nOA19vUfnVTyA89/jcq0sVgc2T/ZYhE/1mX2fhV5XAL+E2nW/nI\nkqIXtFxv++eA4xqD5FXZH8u5jV9OHKh3BUslkSxqYFEMjQhpQYdZc8Ahj2n8\nnJgTtfFVoldHa85SuAnMiigyz0DDr46lyu2Bw3mySuo7cYvams1zOtmYl/9z\nCP57ME8k71E7J711xp3ovxPKZYAbF2u/m98W5qpkr42fiSBVQPAyncIgXIhv\nUt2KcF3UJ68Rejtb+LW3XIp7uuvBXEMx39yi8LJlbY1/FKVcqH3bc32cIS4D\nJqbE\r\n=0x7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrD4AVAMMVw1S5E3o91sj1KhWEkJwrfTG0ftp130zPwgIhALSdtnJmrcQg80nEv/novRWvRpC9xT91kgvUopKSFSuO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.9b676354.0_1585945791060_0.23797322986827218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nbOSWeqrecOKwf82tkY/t50GhaUr8xzfIJTeLfg9AoQ+HmAd93+93cg74JA059whVsxn3T1qqxRpZtdAfP3RZg==","shasum":"9c7bc8f3d4e1097e0af837d3acd48301446a175f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.6b946095.0.tgz","fileCount":20,"unpackedSize":82174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6lxCRA9TVsSAnZWagAAPwoP/iaN5qGjou/O+fOsPJsr\nCzxgflpv/8UWFU2u0fZPp9b17JEMlQsv/651uFSJ6raRzsCC9N7ZgMOgfGP6\nfCZw3pitsSHdR/mt8hXCJE/xx716daVujJ2KOa45OdcwWRJfH/khM7y6Om5P\nD3UjlvnzF1mLW9Y7KjXGPcJ0TIcZP20IWVsAJO1yC/N72nBKUFgp0sjp0n2w\nljBaRXIHAdvUG1myOvm0gYNX9AT+7/SZg/EmbZe57afdiVwkfLjIt7MdCswt\nblufwKwlgMe6/JwJyzmuSl9vOMIV/WfmjhZ9yqek1WbDNaWJCEMlR4gbk8bW\nHqDcuYP82nDFyTpYf67OI3UVXvtJPG3AghQElfrDmAGDLynpSqA5VCl+R5vM\ncDgp7m0MvXfhyRKQ4pegvmtDfPe++pAaqcqHiSpcsaWBy/PiO7u2kvYdrWOo\nwi/wshHnNWtpuGk/oXQwEgzQLhT+XgyXaxao9lxauHtzfy/yfCNwqeXQhm9p\nkNkYU5UDOuDT0q3jYNCoPyvMgFjxINi24drwgfn+gdteHdazvdEC+qFju+5H\nwvz0ZSpx1Ri/2/a8JhQfrtBPdsJ5znS14GSyl0JRnfD2IDu3lB2fiU4rANOq\nFUPlh7ivc9r8B6u5bjTrHG5Tt+433CcqGY/OiHWYQ8dpwLJVVAv33/9N3K1m\nUD96\r\n=WPba\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChaVC5Z4h2Afv9I2Pu5B3n/AfUI/y9Mak7Bn5+mabZ/gIhAIRKjjq4einHfQ5PXr2/N+Icmd6wVilwMEAdUvSYzPd9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.6b946095.0_1585949040006_0.3178877542970888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NtdAU2QT5ZlXGETFyeVisbZ+DswYWTUm6dQ8gZTVOkwf0VZvlaSmVV9rdt223oC8N3GWMmu5ChhjqfO0Jv/xKQ==","shasum":"fbd7d249bf2bfbabdff9d00f9440750c8f9f02a7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6q5CRA9TVsSAnZWagAA+zsP/RQZEIXrtwlrxAh/liPc\n1hu3gmcumvDdaAjbzIG/HKew9fRgEegyPwbHptS6adi3uV3pBPYbPLfJ3k2d\n38Byo+5k/81ZJtYvO2jVDlhripG9lJEYNIvKCKl47vDcRJe6qJLDoQO2WgLD\niM727CKWd/UHok92rF0aqT444VhtpIbH5x5ffovyAJenW51K5edjuzKzhTi4\nZqDXQlQkIktL9YdNZFW2WjpjcLlKQCF+41HSc8XeH5N/Y4zRfK4ib8eehPz9\nS0WvxL9EqGFDhEgRPDr2E9+eIN6bgyDCOFuLhtg9qTtDDLgq7uIZECTdxUrR\nRieCbHmyM1S9uZ8HxugR2wp4BVSL9rJrQt+qlk72wcUWh3aiqZFudj0eL0Zj\nytfDm0b/YqTXw3UpplwM3aitLMBp2hTV/3BPPVd2axh5e9bqOJWhrv85TZXY\n/YQfeh9YVPsbFmZUW4pHaSDoUXpM+2wVzBZHKIE7oUM/aQiyR2mMJC2ibFHq\nBdpfF6vFMEW9sdjEmGl5PvH2ReK/+69LQ7zqsvqESRlNxKDc8ZNdSwgtEgVP\n+333BIK6HqX/glceIeQxTxxTNvWrM0vxN6G9wfM8eCdHU/uI+o9sfb7lrNE6\nfH1YAFH6IXAr6z5iBKiaIB9oauzPrD/0L3BZWgZJgCOG1zdm44enfaEnCh9E\nqw45\r\n=t0Mn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgMoTSw1ftxi5XtnW7I5VilSvpQv0/6hy/vKj3aZZOSAIgRlJdXJczOHmcH2G6/heVjZLOiy9l8EP4iRTTCFPCtT8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.5ccbfaa2.0_1585949369054_0.4710658899027482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-b95zFSkHg2dUXmUcEmd1VxyZPm+3aQyX/u4TMKZKvv8AX26eKIvtOFkAyQxy9OLrQnD0aEdshOjaDSirDtzWqQ==","shasum":"e3c15a105ed2d07a20f2d781960270942a8a0ba4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.a0ab8772.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3JCRA9TVsSAnZWagAAuRYP/jDOzsWtaXIaQ0U0CLi9\nUkJ8Dj6hLhi8KaleetHUB77zeT70GWW4GPwYzYBcTpWV1isnzFLXnLP+w0tx\nXKtT4EKnOqo0VmweBo8DhwqgZj7izobSpMP8tnQ/KwAZqz4wJhBLNhLB5XdU\nl4+bHTts/INSXnuad1sRKUUuZZq4Rio4RQZvYSft4w5lg3J4u808jnwJbJoQ\n0kcn0ICkbKJgI9U2/MR+JMT+7aZQgtSq1fCRDwJNYyYKBh3CupCA7+I1WLan\nrNThKsKVqCPefF1wMRETqqE2Nwxf2rHLY2bXMgvBOjVm/1t0OEJv8s0HINEe\nRzBJ1PA/0V7xXbcZovt6Zw7YdAa7cr68dkC6jvBoT57bSVw9MuppuPPGih61\nhQnubf3aOOHcOBTR/3VaVU+VWQEeHUaPzYn3B+b8DI07h8h85O7X1ErOBXxk\nEebW76mkB2CbviUZM91SVuL1twSXalnDEXyOtGdiPqqpD0Y9uPWzT/VAWc12\nQm8dm0MzcSZv39JIivjCEtoNwB5iEpPP3mJcS5llo0ufenOuwh+fKyM1O42o\nmY8yTq9KlpiEKbLC97e+58uyubgp5MxdymQyyFsdhWJQtTYCimpmjS5MB5xp\nC5cuYblfgGaPVG21Td7GAZCGhvjpP3AicUWI/LxYaZ2nqK0f/nCPOzKOw/23\nmruc\r\n=CCpZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPlMaqPPtyX0bONauLSK9DJuw5d0cvwzdpoggcR+AshAIgDB7XYUO2JAP7+JSfOHIuzMITzm4WnLKTiZifAY/FQB8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.a0ab8772.0_1586290121310_0.6718925285057413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-d7rVHZZb075OGOiKigkVWjdIAlzhaj4piowdGSavnh6lKQRy9QD2FTzh5UgnQNEbJSZRse3FzZ5PW+KqTyNZzg==","shasum":"3068fbf4919c7ecacec9a75e98502907ba5cc935","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.8d352305.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOVCRA9TVsSAnZWagAAiN8P/j983StiQyETDXkP9rmt\nYlnN0wKtPM6+C4wjt5NRcVAJu6vGcV//Wwac8M2cmVrxcFckpizLylHSqMZL\nQNMM9x/n7pw7lJNQfvpgdbavTsjkiihPDZDKv+YEhgAgaT/rtlb9FBla4yL7\n8CPr4uLvk/dC/W2aTLD3Z5z88EmBCh9z+/Gega5XV5MW1zZXrz1dH8X8nktX\nNx71dmhP1wQfAWVUYyY6NHsgQkKHFV+T0et7XoA8dG31iW4XHhcWucWZE+tS\n4TlsumCX+cn8qRxH7iAT7gIqey5mZHufag1gl5GpASv1AjIO4DOVlEBm4DZ9\nT7hvupbVU/8/BJcOEmFQieip1rDhxwnQ/MaSSbJBGtsxI9NHwsbW1t/WOGg7\ndlbEpE41vHYBp2QemR5NnPYft75Nrg9FFUJUwK24gobTW962xTr9KC6xyZQ5\nQ0WjsFIY/bQZRBVKAKGNPfH0EsuEfatCYtdwzqwmN8stNhDYGpvMyIWTaUH8\nJjTuVTIueTSKIm9J51Qj+J+6oivjjN3sfU7reoOZprCMvFy8I/Q4sCWdBYxQ\nmXSNWF8NHKLF8p3Yc70itKDiJI28/OJsl2LDovq0VYlKigdc9WiiD01bI7jU\ngl/KnMjfnOILOcEHJJjD4Aa3j/vVmVglATZAeudV6K437k5aqU6hEGZGKK12\nSa8X\r\n=Wfom\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6h7xa4IW5oyh0YlsGEeGHlpfOenJ4byV8nonoGX03qgIgU+uY2LobnMIrfD5Z70hwKFCA3CJRdMq/ZEXmtt34nW8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.8d352305.0_1586295700757_0.7825636749220617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-snackbar","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VrOHOITzg2niHFILU4+KVxHc9TDxNUJgdmLj/jBUv6FFweSGyMNw5J51xxEQ/OtP1pHUB9tY1PA34mPDKPPJwg==","shasum":"cf4167b6a84f94b8bf2c0fd4eef17222d7bd31b0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.31eac79f.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPc9CRA9TVsSAnZWagAA4WkQAKOKvg0AJWuw5ed0VxOV\n52HOEYJXKc9NHec+1Q8KrIz0xwljgfmsLLK51cYc3spbqplt6ETDDXHkGjUV\nuFNtluS6YgQAkC4UQfbpAFIP6AgByTJ+ZILop/PFaVR9CMnAkflAvM+ua9LD\n1b1lT5kDO49Kkuzjnmt1m5I9Ol5MEnw+Gse4cQJqD2vecOEicxK5lu2+lVvg\n34vpVGRlejuA5a9gKCQmhyBGC6k45KwSs+grZ5VbFWw7mnNwiaQ5fpJWbYnc\nXdLlml/LuxW3oibVNR5tokFdGWH/KvNEVFBtjzRKwnrLGw+1fb0eCv3M8R8D\nB48FYDC+F7xA0Vn1WJMGCR2IH5rISaysVwkMdu6iULu78XmT6BkIWy5ndy/y\n91c9inJYgCOoNzxEHgR7ZoxOs/JJq7sowNm2V1AgN5Rc0M/0pU3e6310a1X6\nRkRB6OwL1QQhchDfWBdXQg5OiJUWVMDSYvsRN+kEs+agDpImt7kVJGp3Ix3A\nhW10U6oEAEcIAuJMsqgn/RvhKto4Ix+p4d1E3MV2UcUODcMrz/QAU5CP3nyZ\ng6X8HmAsRE/lFnKmpOhJzzZENCMoTovGzr9/b94ME0cVEzB4yEdOC7pAVUxX\nS8DAjdR87Zey4vkTOr8CGvRtcURoxFnAZUf2jroINQR7sFRBrkbvvUwO3t0H\n9MS6\r\n=DDBL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXd8Th0SSFJImisNG0rOqlWluPLi4ByUBiLG546QBdbAiEAnxuX6EDlTFeDEMHLdrdJor63Q9znKFOSCwYvb9LDQzw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.31eac79f.0_1586296636976_0.719043755936855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-rvuMZ5TvYBPW4tl8suyzegyqxLJ/7APQFCdageqEDisILrBrhAJLWORxbvwoUCN3vwJr0Y2qKeT9guBpXAkr4A==","shasum":"812320f5856bf13be3382e4e795661a02891f0a7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.ba05565e.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqlCRA9TVsSAnZWagAA7RAP/iA7HABKEH5DorEjgYRz\nKNRx96bz/6zlNjUHbedC5uXmnynmVwhDT0rwpO3PROh/c77OtkNWug18Ehwb\nKfeNs9Tx8KUVZPMsy179WxscPaM+0DZCz/iMtu90xVPzdmhnIh+I2NNtEMpF\nvI784Jqe7f/btZyF2aofkm8qd2TfFzeDi1xyQOwWGtjxJojGka6fhv4E4m1D\nugzrBPFsABXS/8EEeJKpW8j9srwkEyX1YwySOUOL3Q7GiYsXo9HoIMtxJKVD\nUaATY4nICGqnkQKVdxxLwkVURJeMlZWbwdsdEmq3W6R7IW3Jh0A6Ay+nHoGN\nEnjVN9BZ0IC9lhs7bgK1RMdGkcLLT3tKS/qgVuP+xN9QZZt3Cy1lMBN4owMC\n5ph0M+RGvYtgo7ebkrjjwOxjU8h/qaTjTk4nX0KlTjxeMQLl++kKavJZxQC4\nWQs+uMJYahTccL+rm5wGvYNsqtze8jm1sYflPEasOZ+Q/ISFnPeQGLfmpZlk\n8KaIOUVKernAn+le/D7wWQhLPps90OI52bEZn5cpSb0a26DWnxgp5byqAqKU\n5hlaRhrWdgq8C5En40K/P9L+dceA3dWzKUEu3b5m8MO+8ouxnL9Tu1n0h4rt\nrb6ZS5dgC13KwrtdtsaqAnVhfoRZG9yyVH7xH52Gy/AXor0/aLExGOMA8wPB\nN5lq\r\n=l3KI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBs+i71SjVeDceQctZRY3zJkoudJyGO02vLTGn7sK6ljAiBYDrRwLeyMPnigGKpjK8l76Esd1PKgtzc5mOEADdGTlQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.ba05565e.0_1586367140594_0.3834686719367397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-bjfNfAdB0yzX4wYFMgeaYTet5olRe3/E1wiB4V0ZdRXt6MXLVV3BGrrPIRD1aOVi1pQ/fgF2f0iOBDZN0LMfhw==","shasum":"33305d4057fbeb4668d6d7eaa23b71ac7c71a21c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.25099f79.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkJ5CRA9TVsSAnZWagAAzn4P/jFVsTUTnC5KJRYmHkxa\nIgFBnXju85dRR7Q8sOz1HxixXLMXsK+ESBdrEe/uipEo9TqnvcFBsUnz/czd\nv/rgcny/SA9DNBgyyMo35CX4KZvIJ3T3G7nTf/kQeFonNOqLfzEjU87jR6Qw\nKe4rjVcN9cNsHgUk4lCKXxJ0KredKcgpugwVwjnVOS0fOSzPVa847tS1T3J2\nA3mFqE/ol3aEe/lS95UkSUJULVx9aKr+4spKHvbFJxTecQLhTBAU+eJYq3Ho\nDLaIbc+E0GudaYhC3og+5hFqXsJDOBwmrU/kz49HeSlEn3pwarmwgLP+JO+e\nTmJRyZ/X9BJo9SCbmZFZ0Poi0aiZ4HwnPzjoFfKa975ZsJRUKgZc/N4J7OaT\nlGGJavCEmvfEzw+ML2sd2e+yAdGyHV0b18/OjMXzm1ImtqiJhdxXjie78iNl\nvOt4sa8bQ3hC/gRydUR/c3C4ZvBhLTz4thoaX6ItRsXpMN1COs8UEMEk5PA4\nEokFCUHIqcaCoSCGPc5AVNaKcbScx14/RdmkjMx3kJKMlABP2ish30cFaR81\nEL/RmxkogEg9wYU2JCd6YWamC0kOOC584S/Cx0rfKY0QuAMC3H0Km/bHgoy5\nCERb4C1lU26ed3CdMTbRu8pRDtqtj1mDjIhHPRZcRJExr+UYtrkIm931Whxm\nB1fo\r\n=2xH1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOmpafNFyS48s+ACRgZsWuHnqhOS7SAtiZ66YNUp7boAiEAioZCgxk3aQ7aiYf/aES1r2flLqjxnd1MCadKCF6l06o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.25099f79.0_1586381432990_0.2603675860083705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-2uOTTvH9w4uDyTwQM53Mf7FS0aej7OZ4M8D6LJd6K90ELNLUFOAEGWqNuhwd0epY7ccwrBzgRh5hYbl6FaUBPA==","shasum":"856dc450d7517765364b3595b97b5ac99742c2ee","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.447e31c6.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndlCRA9TVsSAnZWagAA09cP/jyVdRf4BWmGpAOEfY9s\nwbrdgTNl2QN5u5FxLpGAxL+ADmiQ+FHl/zVxEjv9ST7nGgpsq7o0T9WCXckj\npwwxklgIyZX/cAobrHZkb1q6kUEaUXVEAPgiExqgVQelonNDoaaB0pYP/Tom\nHbMxv4dLkRPe1l26Mml0XRRJPJ6ok3GsyqmHKEnlAys4N4UD979olRIOCZVb\nJLgEOr96zfUiB2asGi5lrN6jBB3BDfM2wGktUbKR8yjMOxMWfyemaTmIpFIw\nH332TtV2K85s0fdHAWRjfWCmF8I4b+3YQ5Xtx7p09nG7n27gM2g5G1uX90yC\nxPxb9Wl4mDywKyH9VbyH8HQKDSP462fNZQRW9Aix+F86521rk4xwtt4lRs7y\ngkEmR4MGHMjZZVZWh0HQ4NlhwmQKxUoWyU9NYLIwyIeTwqIxAnS9wAYkSR/e\nkwVHb0dnnNJDIm04EoxvrifqdrDVwMEsb61Y7fMz19JnmzouqWR98o6nFaPK\nMquZUJf+4pmMCTJgIklTGaqi9sTRm10u2q2l+wv++ChWa/Bu4Ujo8fC3YaVf\nGRxH1XTM4FK0xu7AioKEw7p7eBD9cUKl9dnDXCm9BZyq7ibdxEdvqAGvOqwJ\ngnAJLPK+cMSLKKVE1Pt0TKzLb+CfXEWi55FpUp6GQOqZ5yV4jIXfRQe29cGJ\n9NB0\r\n=U509\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmyY82CJbRDNpFHRABoSXypkdmTZ2+aq2obkUIMXuIwAIhAPfyW+dZ69rDNOMjfb8FWG59QwL7Ctg01Qh1pLbTJ9Bn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.447e31c6.0_1586394980942_0.9501848373644151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-JCsrFtAPg63/KAK+VNog4k07SnAzatqFQTimDIz9AvGDTXrUnKbCaYplX+daHUdFQp6+j+Mkh5MavNXOr4ct5g==","shasum":"2be4589202e671347d0f285de482ae7eb55dbf8d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.d6dd84f7.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnlqCRA9TVsSAnZWagAAYjsP/RHIqMmXz/naZ3kQ2rgY\nA8SGTK9wZ8o7/aIkPYOdvvX+ZFePf942MXrtBH60IKnIrl1HMtADEeiyE4bm\nQcCDzrYshU5pddgIDBHow9wYyiJa7QvFMMUgTffcwotszM1lDj716p6vh0Dr\neCNQX3ZHPr3JUI0GR5oojEoXoUyEvHEfyNoLq7U1UMPKhjpyguDxXVvHpUxy\nbrt5fsP8h9pcaMvz9y6epJN8dSiOxeBAwQ+fE5Ok8yIFsWrZRyNPlAprXqg6\n0BS2qPAFxMSmlMo6ZGEXY4CjmUb7wZlwQadssu9OlHx7eOWvtJHPEjlv/TUv\nCPj6NJje4lg2+fTYnReRLt7nHCZpGrEZJ4I95AB7oWmybXt/1HNVKRu358i8\nH+FKzRxYmp8Ks62eu//GhJpAit77jp7ViI38jLnuajPYvPEg0zVB1Zj5WKan\nX0jEF8APRbEwaMfJI7tESBZgpjPMmhDr+Jmt5wNTVovcg9lo4RjmNXiLGhk9\nG8Sfzum8NfUCGd/CXX/RsLRHkJTYj6Wkx+aA/cX8x3wQwLyyR2udyAK5o74C\n2VpFJ7BDkSobeDU/OtJduBQz+y33/urtbB12yZ6DUYMyM+CDZo8gWpC/qMoE\no/Fq8C7t9AUTN49jQOa18dxRYjhsFtmMlr8haAeWYfAxI0+to0JmP72FblZR\ngIxF\r\n=bZlv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAg2kQBSvd8Gu/wvD2hqf2QJH6D+nBP+87yAlPcJFeBAIhAOrriw17IuQ7E2TzNDi8AXFw6FUGcf2uNCi3be2KnYyL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.d6dd84f7.0_1586395498084_0.022021969716559564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-qXkSPhRGnUVmjbdQsx0XihSlIjbBxCqH9ifH9jEDdd+FpyX9JvSus7DnragHAccq49p1c1l+mxbwZ8pp+3cy3Q==","shasum":"c2908f17f7eef7d47cd7578e6e959c8a34714c86","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.9b03ee68.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39iCRA9TVsSAnZWagAAUVkP/2DIQdrsXiQKfDU0SQ7n\nyDzJMWnU4yzuQxYkgtXuAd2yng/qFEtwUH1NhlA0NH4htOStyZBhAjAehpfc\n4Sk2QsGU7i0IOYsesTXVLia8qSEJShW9EDZ+Bcx9u3HbC41+bgVqmhQpB3ew\nu29hq+lPX62u8ZrEshDbv1knwAf8xMm2m7ZE/DoL8eUcVyUu9OSN0rBS3fde\n6Tub6LkJMeHiW+FceA0HezLGMC3jo9sPuWsZx+aAxZ2pnHlNBiolQ06sWDZT\nvYok28mjUUSGZ93zEtC2Kf/7vi0+Etdf1p6ycykb3ny27YZKjQS6eLQJEjxV\ng/P1p960H+KG3uWjIjIO7ncnEj5RJCs24P+ZcMI9KBypDlfx5yBXjfBV3rot\nLx7d7ADJ+BXXQ0dbGslwOTkF16GVSXU1hvGZLqwAe67pOAm+PO9FhAxcOork\nOXQhW7MUXD0oe7DKchYrB9UrXz1lv/+u7GLZWxLLFXonRM8uTSUZGzZejrdf\nLFoxdH41cM0xLZ/SZY1ZX9Pn8RM1lFkCW+rEGadQR2jbVmmVc47ob/77hy4n\nJurPhXAKVvwQNBZJu5CEIUkdaVOcXN2p5mZXxtcuGWBkAyp4TI5J04OO+xE1\nYS5YMOYUiPj72S9qmaiShO1ZXrzgMjb73KncAmqyLxyY1ErqSgPKHx9rGGv1\niaHG\r\n=mgaj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOpuk2ZuaO9QbvjbcfIv5T4Kpxkd7FW7h7mbHGkgUXVwIgeFMqRprpLmyJoywXnP+zo94hcF3MR9ywl5TGSKuX2YM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.9b03ee68.0_1586462561917_0.4090823688404004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-R3K40/hxV+3XkK6wMDyO8qIkL4Vm51Bcyij9CTnl+Tbx7yM8a6GIo7+mYErueBebiuOv2w+M8vEMiBaDU8vSLw==","shasum":"b7ce38e6cd2a9abf53d4d0468c5d4e87ac08bfd1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.bbc25b10.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcCCRA9TVsSAnZWagAAet4P/0AfCRY8t4SgEtzShF0i\nlSqRVNdmF1e3HUgJPbpMtciV5bxscxyNMceDEhr39T/hn86WF67v4Lec2PXb\nbfIOUtp68PGeXo7D/HoS7hFRW42X4FFdvPFOF/o1eJViU2LqTS2bjdxZRFbA\nGSjPITKX4mUt7gSVbDigMYhcyeTiRs7kLd21HoVZjdT1o+cSNw99sKiqItrb\niOZokQUBKPLe20p756eKMi3DC4OuMk0Bir8unWlYEL7i3dz+9evp4s81+xY1\nTrgc/IYB6yNO0o3YnZVHiGQjv6XXTimz/EIPlTIikOJ0R42zfZMjNdCt9Hni\n3esLhq0fY/JwdaFCzsE98AfKk72PQq12MBSMVQG9sPtOWTJ/vaeFOWTC5xeT\nXDos2yNDmYGGwVZJCUGyPDu1T33ydTAPg109rFvYrSF/ukFqjRE/qEacKS+I\n9w5CT63fEsNnfIUL5uO3JUzYwGlq2+WNJ2b5Tb4lUHdDxeEX54Oo3wV0IIC4\nFDHHSZVNu8yohBlvaUxNJOgT+kvBCish2GWh5ynCeX4AfLYp+R1DNP7fxX9T\nQRP6jTFbikbQnmHexTZF3MdtM7HPAQ4pFZ+BtBeoExkuJ047POjldPAzR/Aj\njALoT+CuRmXDsMSdtNdojlDHDlvtckhI3vggJO4dW8vMYTwmt1F783nh3Z/N\nE8ct\r\n=1r5X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFz3BTR9gY5iC0eGEkF0Ou8PIlADekpGQeaaa6g0qHyEAiAKoG8D51/wuu42Rn6jxM8lth8DiPOOqnREA+NTAA8R+g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.bbc25b10.0_1586558722216_0.17512498193451642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-i9FDQnUe8sDBFvo9ky2iS03z8rQ/NeDiq8dv8DfYFkTMA2Vlka5n7eS8y7lfmU3T0wMY/YTjg10doS7k+8CLWw==","shasum":"d56729b5dcb2c2512b7796f9e54dfef802bc97ce","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.339cbfd4.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0aZCRA9TVsSAnZWagAAlrgP/RaYE5ynO3zcbUuQvkUp\n5Tbb/imY4PieB8wcfIaBdHT3P1kh9yF4myJKcae5XJSa9AJw29BaBxKAB2wd\n1B8NiAsWAn7jBg3Jza5xKQiUIKYEBEoJgontcSu/iUWjr1cv8+ZuYzaN8J1P\nClDfK43UW5xp25YxxEaNytJ7CEvAzS4KvRgwXGa5fye2k0fpDqD9eCF5u9ah\ntlTjGHLO3dOEAWiygffM1+5/wcZXSYDjsJAbw9AQlycgexi50gCwHoHXZTwa\nvaK5Izz3tQu73WFlVHtymO4jELKc6mkaSHN2Xfs/y4x9PAzM6fyoQWG4DHRZ\nR0ZA9Hi6HucrZUrhln7JAfGpKtESJJ9TX0SBnOLj/3jGXQbu+KOEkCJJIvAn\n1TmDzEbQshMgxNu8N/1huh2PHIqhDLeX23mdsCEMxIOM80RbqpfTiFHkpz31\n1PI8M8hl2+EnDHJSjOPUqJznubgZWnCUWADbUD55ivLSzlbiHxEnuzR5sOQW\nmDDBaq+3IwEqV0r4yEH0an5FHSITpYTtP1ia58iHlCS5R9JexGkvNBdsyQ81\nO8M6hyfHb+SVjIYiR32NP28BBq9dOjhv879NCh0UjTNEmp3blt3GXQaj+GBA\nb353Iqj6yp4t3E2vQA0sYu/Nv2YKGgkB5VOgN5k7Jn53APgniss/a7XsbSpX\nmPzJ\r\n=KqCG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXWAKXQBFUYBRZf2xE3UPKZGD0ajJeCobMjuREkCRJJwIgBMyLXGHLKyJk2BdPtfUlq06ydKGGBTNUmcF9Wv0FkzI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.339cbfd4.0_1586972313320_0.7722486997720057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000` or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zFUGn87H0xK3pIB0jn0CVRZnH0DGSTEZhFE5eOhFhoqSwk4Z7sKdfHRXOltn5CRMehxDtPbk3sJXyhjJnBgQxg==","shasum":"8a873692489a55b8165a77f7e6d4fefa8a05b725","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.b74ff19f.0.tgz","fileCount":20,"unpackedSize":82176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2i3CRA9TVsSAnZWagAAUOUP/1iMKXwezk4Rgp8pzG88\nyZ1hhsg2mdVizvmbQyX8H7y0s/AbYEUEyG4lXK9Dbyglel5g3d2uglEgcFiD\n05NJMF2a02EA85ze9nZ9g+CN0SNytyJiNd3KEGAWlzsbaFtmrzhdsgh69rqO\nuH9z4l3kQIXI0U4NbiMkA2iasxDhJDXZ9JEazBoq4c5/kqhcIVl21vgyX8Vr\nNRonxH7ZFnAKf+wIawllAvBFLLqsEcB1Fh8gfdtZYwCWkhdOam3Rm3dO61B+\nwjbBzpEwZ7RbXIlIYUmUhFhhc1YcEGKn2TouxGUaL0PdC81pgWSZXzh5p8zO\njRE19KlUcqdgC1OaAc5DKhU4lqLOrfJTqj0XWtXM9x0und9tcJtmebE1HOmf\nKUgrBf3uQbe+1+1tsYdNxv2JoMM7NZpsC7KXcXgJJzQQAXiJAh7XdmKrVdCM\nH83W2JWfgcA01hfV0BniNlQSX47tdKYZMzOVLFnFzu7QXkfuufTMozdPLiG3\n6Ep+bWAEt1skgaJ8TTJtchMbXlNvCKCf/2gxqNu7lbqrPMUF9v6KyjfZdmFY\nQBPLR0ZyFHxwrtUypbdREnSYtEgMqk1PEqLjY/IfL1+67uZTWB7vujIIbkEp\nr4p0pnM6VoGzKwdVPtCPo5LCRPOl2Ep1nSMDJMQqofCc/PJPo6LB8BIdSFEH\nIC5R\r\n=8V4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICdBW6/rqyd2wNoWD+N/TKB7o/ToOHkYtaVEnOspXMdlAiEA0xt8gOn/wLUzcg8qS/G4x/yKNFfWP2Zd6iMsAVXNHGk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.b74ff19f.0_1586981047113_0.9111227651685767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zBHPZ9RmPcJAVHjAtWMI6D3mmqrHYymPksT7jzU2w7MAB6BnegTWrDY64XUGCwTXRap36nct2dmQE3Pk73xjew==","shasum":"76b40a8bc81e76c06e4f8c69238c93228d319cfe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.aaa16853.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel411CRA9TVsSAnZWagAAzkoP/iuXhyB51T0NGWPo3Or9\n6jsbDRiqEHqI7DZ5BPscvknwEH9AoBYOhYyQ1sfLZMLB2HZkSkJ5tqUYpvW1\nWFfdDF1t5VJp3NQ48ho/04AFkx7pMZIVCvb0G/yTFejGFeabmcWDqiVCNzBJ\neIllXSZQagD9I3a3J6ZDFzFokunldQVfw8zoPqZQVXiA8O/vEe8f5KMvr4LJ\ntqgklPNeeyCvnGcFwRElrlKBC2VJLtpwsEQffoWeeczYERAFEv8ysii9u/+E\n2v51BF+Kt2Vp5jK/7Am/Li4LbmE614OIUuu3RZnZ43VEtqMBvsE4ILEVx8Wh\n0tl8f9ibxeU4NkL9zXrK1/a7W8Yyhte2n1evjO+kB5HvCQWAyPZ2rFNe50nx\nIRVTa25eue2IlSLVzbT25hzwLxxyqVtrbaTzNdb/7WP8EA/WNsWOeM0sOQq7\npfesYEMF97TubLSZMR0y24p7iT5VbyJF3gGqhWI3wsyks3cpzZllGiVHuPmX\nHOJFDL2YpmqiM3BGDdxJe7ao1ZcJDC9Rbp0fcXABIBQtp+29tayxyH7HMtRG\nCrcAPzNcLePiRMxHP0U5WBVfdqZXAjNwMfo/abHFI66i7a+gmOI8ucMKCGU0\nr8hX3W3Zmdgy5JwEIMUFER32VLzYAE41SA7tEyPu69aSIc1W44Qp6yTYOQCy\nC/+R\r\n=fhsg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1kKsIglNFC9qRzZLwpsa5S4X55rbBiTaTxPDqJEWIyAiEAyRyNX5sWWA56tllQIMiXxJd83Bi4HqeZtyMavJM+O/E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.aaa16853.0_1586990452800_0.8239681988315866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4OwNPtkJlROk4JFyj17PhwoN5HjQxCEDWcPW0cR4jV9XsK4i2KhNJ6nY6nRNUlbO+rX+PYk68LG9WD19oABflQ==","shasum":"f88f96930d7e5cd8165b91e62998b8b5d4c7c7a5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.826b23e7.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKpzCRA9TVsSAnZWagAAHKMQAIcmZ3cOryMmdOniuaz8\nrWiaiaglHOy9J1WsKIMtcHrmmvqyFS2RAWn/Oma+EVkC8uM/+P1kLu0li4gL\nGqXk3YPdkcFWkGfaks77fNGlP/LbX8UfyDhpU10K4GzAPtTzU/lSBXsm2oD9\n3xBkxsn69aZOAZwGZYwi5m7vQTjU3i/8VBtvFJOWznMYwrnTwO51IluyBvaw\nDnxeu/lL4fyz9xNrq/W7jNJPUnhbaar3cl28Uu+ti3GVLbGjJuU43gmtnqwW\nLzzo/Zs1/q+8wTpJpRszxjmUqzsEsY1HUJqNiqeUpBDCJ64VJqyglrkjsBTk\nulVBHDH6QDxYVNZWoxmxWj0xjegsDZdCYjCnjyqgEkn0VwDCjIfd+0rk4VrE\ny3ghQUQKZ+chGvNhbky6X0tgcXz2+uBicv3ulu3wKU27q0GYQ7bCjexAPw0c\nACxpRM/8HKLSzXREdKzisZ9pBupcuQvrUGUczNQThEM0aHu0pc/UcrrYTvgK\nJay+J4ktEE+8Ogoa8S2M/tX6ow187ZB+HIRpTCAVNYxPfh+M1AT6CpWzun51\nBnF+TvKQGeXYhyPDbJTCde68vGPGxhtUSqanfXz524o44Bbz9rxmFvf/5b2k\naooNyaRLV1eWj9WfPyiHZkzSI9dFO6CN4fIPUCmE28i5Co8R+grebboCo7mc\njGc+\r\n=qrYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELNgcY0Zl6vIWF2uI5c/O5x0944yImcK4KQ2Ht78YBLAiAurjPpXk3/xQzXXv/0/wuxhT70bdjJuPXYwyxUsCWgpw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.826b23e7.0_1587063411270_0.5286360412138669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ux2AVhXoVqyhKv6IE1EMLEv5kZpxmdJYhhp1MkIRSGskl/ViiBE6ank4ptk9YO2d10vEJZg5P33AYswkgqaOVw==","shasum":"67f19ed7478c209b153ab4bfa1b4dcf0137127b8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjU7CRA9TVsSAnZWagAAbKcQAJTnXdCtngUEPRB+e3IS\n3nBp3bW3sqizRGzKrxYv5jKv/3Qj+bwReNkM7L/Lq01kgkAgzQLp4BAvzxqS\ni5ET3GP2O3YyaAJat+EcvRMBMcErQ1nkOsVTLkk6RB4qM9q9b+fZEawhyG8F\nCTuFPvB57/v2Ui8agiOnGdqkUlRbzcBHZqergUbCu7zcLVSdMbnqZ3b7y60L\nLxVnqAo5euOXi0qndvS72KsOPOo0SPGAN3Kiid9XEaMsWS8okh78/thVsljp\nVGcUYy8z9mF4R0fdSK3Pvsz15h3vKq6UuyiE9wb/N4/ejfoR1pA4174t09pK\nzcBFU36575ToQyqGmp/wNm5XRyjv6xslIVvZQHbqq7dvDXCwfzNSYzNqcLm4\nURp6FuxGjsCnIdGabCt2LS3JQ6d2McfxFe6eKPGFDMVgU8//wunuMkwSxQ6T\nZExXv7FXDQtbeMen6KUYrobPHjWlL1vug+aOHPKkf9h0byq5J48Rl+rlamwu\nu3gDYDO1f35KoAdRs9/PugrXerTb4UAy3v3XDQ9jIyNuhaDBovgaUbHS4NOs\nG1fDqw9rq+SVNCtoSxs5f1kw/qrxQOwfcwsNgXaYdXe1kpJ/L+MFGc11kD/a\nKaZHYR8JwyOuTpGhZrMFkTwOWke7JuVS5kWuqx0krenUpZFo/4iPfb3Mrp/y\n/KE9\r\n=reNe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCppDqGkFi1wcj6z6bWzfe4gciXP89m7Y/ww8PAjW8X8gIgfxaZH/Y0udniJFHfFzhOmdLlHqaMb2NUq+WbDv89n/Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.e1ad2b2f.0_1587164474851_0.9439308938941064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bade5580.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bCEPUw//jXnldYMuxSdlxBwzIcQod3f9+aYCUzQqqoE7iOF8BWYkqFJf3F5n6FEcNAWt+Nj+WihwCMqEt+h4+Q==","shasum":"7c080e1dd5e243267a3782b01d728330d0d7cf64","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.bade5580.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjlpCRA9TVsSAnZWagAAAogP/jJe8diaKh+e16JYP09B\nKKDnWFXfPysdO+cht+1vdoXPUq0prGoKs/CboxXaFWyDid9s3p8fGirM0gGv\n6BoDWXI7L4Jjido2MddAWuGb5IUQj5Fe+9tzXoj+XE1cp4EhXlLAV6XkxnRZ\n4G1WAc+2akBtLtPkAOdjuXzz16fHN0JDqL/K8DJ/zwn7qZYaq2+ywKLDn3kd\n6CwjePDncMa9kogudokQuN3A6VaKY5Mv7xlPr1dc0lfwgMEjvzMe5SnY9lhs\nNEcucVU5kqIjI5ulS5ak7SQWcAGAbsN3ndxmpntQAP0eweXl2TycAFWF9Ug4\ne0mDBYijobGYmyVMw3nrhWoLUFIkSecmiYLTIfd5hMkdxtY0ywJEI/E6LRmr\n8d+N9easETmZ5jQEQoBVeqUZvb6NvquW4oS67lg0hlQsGRAbGdMMcFPWWPn9\nxN+nqgJ9EQrkHrNy/L50Q9sNxBvr2Pn5LMqISAFVp91Q1gfF/vUGqV7dWJJ2\nsdUjqvjAaQZq0JpgRClZGipCMd4W2D/GR2rU1lRxTj9vgRFILh1hN1UjIZJ0\nAzj1mWtTlsKEbvjqKk0FW+OxsnYOraZgJlA8ifnG7ueR/xiJRuRBUZgVpaPz\n68uqgiGcmsKS0ikhKVuQmJwC26VL9jU41gY6w9w5ICTIKX3gKdSyHDB7SAnR\npXvi\r\n=mMaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmag7IPBeBccOmAITgMUhe27MqqgYzPiFGfpcMNQUURQIgViu79oHaINeS3qxw9TFkFaYeW9RfE1fbVTsj6bp93hc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.bade5580.0_1587165544599_0.5398768141493193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dae38247.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2FfwYc/nmEkfmugjQIEUBH9WwYP/FMpzXcy9Nt4f3PY2s616+CcCW7ZH/d2Hy7eYAZLOwF1CMKqoKHUyVvRK1w==","shasum":"1b42a6a16d546160b664010e4e15d37cdc0cba03","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.dae38247.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbDCRA9TVsSAnZWagAAEJ0P/0JmEwUIFXd1JwdYE794\nEmtts/v3j5lJuxcWBAqelwaALFkXOYtx+dZ/Byp7g3FepRavAhJ8c7izDxXG\nYZx+AQuMKzyr4G9WdRDOlNosAaYBT38+ashhkdRktrNIDkTlynK/0/cG7CvC\nKDbJTE8F1Izgs9s53r2MjqgXNhjJPdbW9jY80BOxK6iFQ18rY2zNYcfNwUud\nSrDqR2RWSH89as44F1vZSrnOaTDxh71USJez/gb5GcqpL5CQo2EWT5qHSAfh\n9q2XTcfmA1Xp3bDetfcUSPSdKK7Jr3A+alszFebkjy+Aaj6EACQ0Vvkf0Qp3\nMbDl4ibg0NfzQ8+OQnRZubonzeTOUXMTeQnUoJNweqJy6aHcTCfz81zRbwKU\nOVXYnJ4jkKkksJ7l/O5umJCA0JG0koWmHsam2DFztrN5xVaDY4ZtKh6yzFR7\n7zk/+YvX/x003TtETzXY8t/yoMM17Z0+NAX+igQ36FoZ09NeM05ERQlF+Kj1\nQZGhI1BXIN9FJyO2Cj4yXRR+6O2zGHp5M07MTUCe/aKxx8dLJVD+n9TiuLPJ\nJtwbEMlYSpi3jI3EvBa7jhixIDZCnEQGiPM298EMt+LdLrOx7TXEnsDbIpd9\n/gAzv2jkW8q+kFfMiuTbDa8Z64VA2LeyRARiUdpQ7v5MthgG8Y6epg2G6TQK\ngZG4\r\n=hXtJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiTM7txXAJGnr9v9IjtDCmSAt3C9EFM1fe2e/npJ5XAAIgcRLwknE+za/8P5WOKBGlet4Jz8rQgEfck8aol567hIw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.dae38247.0_1587168962623_0.8580182756391672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WLg8CeMQT2uHmvYd+27qZO4bVi+oZTOV4AEvB45Dkep9AsDMUbSvJM1Psw2PcFwg03RCxe0fUYdO5nKv39jRYg==","shasum":"e4930963d2558fb4c5f01663655152af593dc234","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.a04c0b82.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksCCRA9TVsSAnZWagAATDMP/RkFE07UdkL0v2I1gGtn\ndSZhWSlsDNM7+coEknLLt7QF4uCGsAN1tQG0K4Z6lfHcQaPaYj173v6a8jVM\noSYAp+GYH7m53tw92oBziuLO3wKksFpnXWWi2GnyFPCI/+reqWDTbruslOFh\nCwkppf2L45Jss+wKxppcd5WqCzWyuPHcmmgPt1VVOIKOMyN27ssxLuFXS93n\nxrEwYEAJVab9d9J6w9Frl3FTjJ+QV6DgPrI5MGoWyRzplbItIWKJkx4Mwtvp\nPo37rAY2Elg+oBhrjcS+Ty8T5rQzTkRypMCEzU3PQuaF85aG/kZ8jceRSi0x\n4eTICfDB+ba1DeBsyWOeGmR+fHy9+xdLcuOBkUX5azcxQA+3DWTJIhnlM3AS\nrD5NUTWmE1OcOM6+vPlykQ3rlkeYHqJoKe+AJwkBHHy4DXKXa6NId1tuLFGf\njMZ6cl1JyOLu4eGcCDy8U/KIlxRdPahASqA0oG2aR2+6sI4PA+N1BrgVw1zZ\nBiRkHHPrO1EbNTAR4sw94yudDFtrXySZDdH3WAfjL8HR/giWmmPTrMAGRYV0\nd+3nBnAbwHdgA8I9jqn9y0qMMRqxsfjq1kInfyrfdlnNP24NzGZEZj90FYwj\nUwJ13ljfD7I0d/CJPpIB5jDRb5Tm/RXgUaVC2kkHx+qT6OCYaBPBiVlckFrp\nvm6D\r\n=yjnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCh3aIS6UuYHqftz388PRsFgT5P+gEZzWRUqQjVO6N8gIhAIit/7T558JdOKJm8t77cJkMFvEEZ/RG04k/QhuBcll3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.a04c0b82.0_1587170050132_0.600805036953147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.715decfe.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+u3r0OvZ5af4fLOsSOdVKvt0vxwY+wB50XgP6WCWh8WYBZxU21jxacJ9WNeRkSR3Pqp7qnhI7qKoTrUab1JpPw==","shasum":"261bcf7be3cd6690b307c27b3541b674398572e0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.715decfe.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetbCRA9TVsSAnZWagAA1ZsP/3iNx1LhFEKRTWAbAO5e\nzv+YOJ7veE0aQjGjr/VI6/7acyY2hR/KUNNh6Ew2NlSA+MnVnoCOOkMC4Jbc\nwK76QLFb3Z4K3zp4dXmxT/iJaz2vAE7/qvvhlgnM7rohMEirHEmgR2/g7XJJ\nDXoPxVXkalDkP0xg+QqshT0IuyufXzZi8IWnXBG+ktE538ry1QeTENxq/2ny\nj80pSky5Ewma/SXAKIQNuXvYWe/GpTz5bK50+ZfA2h3lckZtItBbvliT/MXV\nMyJRSiCLWEzGFr3g/TIx6SVGNP9/RvnFB2cLQ1eitN1L6ZlTeo6cl6Rq+9KD\ncVSSj7BsnKWH2wV2sAUzyJVTJIY0jS/y08D+yGPRvRfkMiPhsMQHnkYtSKo7\nrfVhV3kqSI2SkxwIr96LGKHOoQELVwka2nUQk4Y1bsrkYN4bkbSW5uZGzJsk\nWZmDGOLViK16f/cipvDlIhAFcIqi817ZU0mZjbws56WmWsMB45z0w1irXLl3\nBEJLnWwndrqzj8uC1tdz73KGbvNpj2ZCh5PyG+eBT/BFhvwKhZG0sLka4N9h\nLlhXUO1ZTILkxlPyZZFhRIa/dhfOb3z2+G9jwQlijg9Pv63KesTykgFNdYVG\nBBKgn7Ww5qRTCPpkGu3320rnbfXJDVxkRM82dzh6M6I9CgCAHHyihlOYMrDK\ntL1T\r\n=5lwa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWVvAa8VuL02MOujiMGoIAmAeUnN4mP0VdB+Cap2+3QgIgBlCQRK5F4os51R+YE6kosRwiIH7Ri5sgs6xQaSy/7pQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.715decfe.0_1587407706767_0.45422687113776816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-a8u0l3lZYGMDnCosWmFiSAuX8o+P0V9QZZ8umrKGMyi1Wqe0QdbLlgub4CoZSjOCP9ckw7/zOlsDQDHytKAtrw==","shasum":"3bb97ca33e447605fbc436d296ebe9de3f9afd08","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.c862cd04.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVCCRA9TVsSAnZWagAAQbwQAJXuYrwtCjn6NH95XS5v\nilO9tpZBxloDeNC44xaKFe17gjxvxRgUmddyisezauA+rZ5VRgl9+Sqc0f2z\nd9HiBEBISX9DyEAusbqLoR4HJgSco2cVc0ZT37LcFCpH0fn/gpJoxWitjduI\nwJ4aA5lKNgky4SvvjRAmQGQu73zcvyQQBIt1qP8dkt0D0ZuPGERDTR86EFu3\nOSsE07TObgHBQGeEcYKTjAk/CL1+IMlLP/NgZJlIpHu/CxCyapi4XKeK2w8L\nB4f7waiTl7yQVFb3R1sopbKD/WIA5M4MyospbuvypBzDWhitiH1OOgtAU0Uv\nCj+0MY83Walpi3kIrfTZlI8br16sdSZEsk5BZ8TROBeKy9Z9AFayb1PEj1Hv\nCNK8GEmQeCTkCCpcHrMslh4pImxjcbrpdrWRnJsaT3oXIgZBhTPjZohzLWLP\nB27uzSxiotIDurtMTl2zgISVQsyOJHVZ8MXWnPqIaOEbWu9Xxz75Itzat3Ta\nffXk+ckbpvQe+7NeSN095VSOR1VsiNEZBGuih5W+Chm+l7GQDeUJGOMbAjMt\nuNigzQWKevKlaoEHccWSAGXK7tOORVnxxCadyOhOaMZbMBvQGI3uHfGcxarw\n+Wz2is8Io1H8DDhZwvaDVGmbTNfIRpDQdqdtxqx0iD1ZgCTKQvkQC4Uzv+zd\n91gn\r\n=XOZl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuvV0npLuVvxQu+4ImK+aS1qyRA3Oug5abWhvGcOx/xAiAutREti/TugkRggMlGxFpq/Y0W38+y1jv+tIeXgpelSQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.c862cd04.0_1587418433984_0.02865147145588054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ra/eBPvpReDZ97OmavJKf2TxQP2Nz9HtN+l9TOchgHalbkUwQk5HNht106HNRZpfBkRvOoBN3CFrRBRo4m+RDw==","shasum":"c3f8711eebca37d512a7847e80bbb6d8ab748c1b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.e9b01b35.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBNCRA9TVsSAnZWagAAidcP/3Bh+2UbKKKK7kiTVaDE\nvFn8zDnXLRU/flyWWi7n6xddg7hqQEye8ki/NO5FYzBn3V3l7ieeg1rfHIXb\nQdPoUSx7asAD8qztn29l1xBBY8bVPtywEB/zhMNw2ao5aPqxKT+KuHsE7NwC\nsfx2Gjmx6L6IXcSrz6/iFZglhAIbKhc21DvoyxW4y4U0XRPSiV8WyFjxlF/C\nSvo9MhTetBxZHkPoSeUBYXK4cIMSwO0f7nlQqtv8jz7iN0cetkxJ4bl8GdcW\na1nKTl5w9iY8BNNlZgkIG0PgFXK8pAMtFQVGU+T5BYHJ7mlS5dMrqdA9rJ80\njOv94lH5CBAC2wqMZxqFvOJwxoAeIq9oT8OGa0nF06qcbFMLyo4LrJv3T67j\naxmsWzDOVct+5ClaX/gtAarMHUiP1WG/pYrOTDFiBx15blKazIl3Ed/PuDWm\nEk+OD9HqU3vw3PmjtXN/Z3smCTNH7UZSLPU5OShxEQLv5FsDCzWbTXRd7kVA\nsAsYEYmehON/b6j/2RBaQ0cB7ZMHbq+uWdfJMElXbvspUq2dGwPCpBFp2dh4\n/uwA+ti1I/E+bAB9ihSdcInchX9JblofPqA1Lz0gZTWNXtz5sm5t6WW36V4t\nGVijC3aNT7t/7lVduPBLLEMHjvcQ6RXbKtBm0p0A4UILnAL17akHh6x/kv/c\nkrRc\r\n=ieZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD43V3lzuVofvIKeZQ3RAFtvtCjU2Rle29fvnbbkQiMmQIgITor76uIvkFejoR8F7Kssf1t7X5xJW+Xc3UCztyAd+8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.e9b01b35.0_1587425357483_0.198490390400607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-79Mc70LdbET3jbgpPwQhkOJevRiqB0bjtmRKGcaxWGfKQJhX18jBf1Tj/IOfdFBR7faDBPiDjbOyYvm8cynwnQ==","shasum":"2b12159379abf14c68b5864daa76510d5c0eb62f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.ee7e8989.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkN7CRA9TVsSAnZWagAAKVAP/392H/0aJdvfYrgkXNnn\nn5ts3wkmpnJKYBrHtyoDTonjGh/1nuWpMO81leflBaz5kIYrEpQoVKc+d7vE\n9CLX6AHBJVOqdP3SgBcrEAqj3HM0ptL+HfIjHrIGQWVmsjaq9YF+2yezVnGT\nTjUDQTrWKwwZDu39jsp5mskjz2dhY3AFEmYPBxeznk2LYBtYmxarXRsTeVfV\nwNhrruDWKxZ4cVjrjTOQWRv/43EX3T1kDZeigr4iBHuWeuSSUyzBtHW7Vhgw\nuS+rIvzFqzwGzXsHektcMD955yFmPjjlib+AmFd2PdPMo8uafrKuuhUdmM1t\niipvMGXq6nA69ZbpzBkzGBFAtRF0Stsvw/kvsLtchIuB+aveEIy8p9ngq+wy\neh4KU/nyLmYbX/bXU7084i0rVn9y1GQVkgZr7lzN06MeSJkhJT5CokWrHyD4\nu9KaMCjRT3xcm0VoXJZ1hJOihs80xALPIsV62qnCb2pZcciQC/ZnAivBZtx6\naLgVKrWKvquMj/XJXH56sQIYSLuBm3KiciPrNOCRGR8ZIo9wbuv72p9SrjPD\nyiKYgP+ps0xY2Dm7+BvfFskFjZCyHBz6q+X3YCutuDksFlP5kEL282cqHgwj\ne3ppPp4Yl73gWJkb6769zNdZ6QmqMHl7yg/ikpqOsqkaheSpEmEIuDFMFDTg\n2ijM\r\n=/tnY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF25VG5/XwTeTU3LaaoFeJGJg1pmZeIULLO+JQ2kU3GjAiEAhLJWHw4YK4QafPUzSd6W8RVYnshfrNwa/BpkiKe7s/g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.ee7e8989.0_1587430267514_0.3094881798254385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6k3OKVW4fnnZIH9YXIiKpG++/wlkJEEAEHP/UAV7OmDhYanbPDImFvLNGs/lWuwrZPXj3lq0idYtr+WPkp9hNQ==","shasum":"1b60028ab53260030c93a55e56ac3cb3ef3c336b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.9bf47ffa.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz13CRA9TVsSAnZWagAAaj8QAIuneVnGbxgHeSwwR7HQ\nhhrQrRxyaCkdn7CB3EuBwwTNUN/5ixM8YEdGVoY5vD/L6hj8MW/5Mvxts2Te\np9J5LmKxve43h6Rmrx1qKMXRZp/qRIEXM9Reu3jYvuYZOaeYivRYlx4zQuM1\n/olRxWcXrAeac5pNDT1m/wnH1id1Hegytk83KceaC9g3wbZd3jMd+3Og+/jm\nGngRh2Pujl/veyHIYF0se5Ct5ONm5fILMBTPx1pTEVYrQaLZIb+xFg9lTWcp\n02tBLl+wr2Q2kC79fMmFzqGlO3UPja/BOiz4dnbwqlgH3I7EazOXju48KfWi\nxcV0SKXMSB68dqxp/OSyJziE7N8ymZ7Uvor8UWLrbAG5f+6CIa4IoKtapPkd\nz9+WUF58XHpeAuXFAhhbJaWLvch3K0m3Q529jeMDSY3g2XLFIU80C0pqDK6o\njsPnR+0vPpho2uKma0Ryo2/XRIolo4iZJUWmFN36A8cygYTRBXhdR4Wk6ddC\n2uv4qbYr43d82ndRzH2BG8uhUnXsUp8cUbHNepK9dIiwMBS6mT5sFQEq4otk\nwsy9+25ezmFpknR2XVCG5G/CwiYKFDxCTR/ob6DYWwfHUhhBK37f+aM0N4ES\nwm21ys4EA4JRo3UKF6K8r2346xYPdjQz4aRDi1+M5FFT162tuEkD8GP6Xweo\n7Lp4\r\n=Yz4n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw705l4ixXlLncsccWeYp2+8pyIeU04tUY8EVA7tJiegIhAOMnUCh7K6i7vd1hz1dechjRgAS7yGcjgHYX74m6vnJR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.9bf47ffa.0_1587494263261_0.14486235290828775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-btqeMrGozYtSqB6LU3JnYPy/mi1mhp+wfllwn9I+Ky+0qi3fgfegkKamG7AugB7wwndDFaSCz7NcVQOs6uT+7w==","shasum":"072da87c5ade47e739cceebb9dbd4848a5c102e6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.078dbd98.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GlCRA9TVsSAnZWagAA47EP/1sA2OA9zfsL1kKK4y+d\nYkNgltRZ6jbyI5p2BIt6JD/zPh3bfztl8OROFSrYpAb0RngBOwqhiAn1dGaM\n8/SlOtnR6CXPxLIC2xjooBc0ldNfJe77QsXC1AnRmfvhSzRfHZE/qOmYtlxN\nMjifevcVXTc4ufOb4YYLHfaIkbgIO0vlvOiDv2Gld/aiFekKxDD2zlT1jmhp\nqg7/XUbRWwxQgXQHNBQZF3nICVxbLQZKkn8opLenHwrzG3Yq9C/OWaYG9SI5\nzMtuXxQEEgjSjyLWuLgkz3vtD9o3RornqPfibGpH9Xgvj4PjbzeTpNkIWe+B\nVElVjX9Gw0KRh6jEeBtX0eXGBjAB4OnUYbiY2/A+XytmJf30WXweMHdCvdkU\nyjVsPO1SlKG4B9vD513091u4bdAczFoWPoCIUOH0puoU8Ky4t3//rDyenskr\n+h70b6u+0JlN5Chchl1Z5ogw5Gg4phuU1qTLALLFi8BUXf7mDkZoVeC4eTq1\nBymXYJ/QNjcyKltwWVJGT55ziV4/Re4DmkJ5xU5Md78LWLvnMGpKhSC/HtNc\nBZDU3w6HnjXv6whPDwNpStj25WqXeutePJP3/KedbQKD8VxJO2W2c3c8trSJ\nrN2/hjY6vR9K0bMV/+CsDHlpnxL2+A/b/PC3q2A5r8R7utbZARKJBNdEyNJ2\nSPmM\r\n=6Xat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTzA6L7u4vzrFn7Io9oZaS46XbkQMAKOnzj8vaYFe7VAIgBT3PFKC6ZIbB4YNP/vnnb229BnJtUk5L7j+Im0nD6jY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.078dbd98.0_1587503525058_0.4561468006321432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.953015d6.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S8q9EhF7XwGsK5c5zbDcIeE46djr1bu5MEQcoLRomfouf2mi8pRjs3RxujoO+xaU79bltQM4ygC2K2b9j9VbXQ==","shasum":"28cc21922b72737bd2a0ce6bfe939fc718cc1c9d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.953015d6.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cgCRA9TVsSAnZWagAACmUP/iiERQHh+t1SsUTi+htv\nysmIdkIGmhrRMigbfY1liO0NiJRv4GsjAO1TCHtK9B1RM3UfRJ6Yp/lEe/B7\nyJLwii2hes3h/7cj6aIj8W89cA1ZxLZHjM0sdMCtCrI9b/qmA76YBzP6bj2s\nY6cxWLQ3ghZuANSyH75qlLmQyPTFApGgPnfDzKM7e6PNvi9GWSeo2PVKHqwI\nszqVXUemWrAACWjglO6KWRVPMP5BUJ75/SLTN8IVnvYZNgZoNmf5MVGCIQ+S\npmCVvUybdxTr/TBKRb0kBjRwZ466vo/cCEV2DQj7+HSYOV/1tfvZYajayvYk\n0eUIS4aybPJDv34XH7vIRmrZM6hQ/+66ubNlaA7+qz0ADNH3BTkVXmuctuvW\nsHP5PIZP/RLb9naKAZjkwEcGhTKMDNOl5A3qhAKUSZGw2JjHdsdtI2f5ucen\ncI4bhWCEQUjT58lq1MRRq5xk6G8KZqJ6Q/ZtHuotQ+Rs1yMEqi5ak5xujrCL\nzJ+M6exUtBLz4duH24wuRAzgN7UJm+WiM76YXGGnnTZlmWVkJ+JXIoju6Pw0\nAps6gkuHI831yT5ayvqPwncDRGE7x1p/5+xFJC3ccJPsioKpAoouLf9q0bal\nkGC+8AXRVBHDD76afUIA4gJafJJvyJf7PouogXKPMyGb27hADakuK/dKov2Q\nq3HL\r\n=1/iP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDINuwaUAILKQEIV3tQ2SjnJN1IbK5sj2agI6O0aef7CwIhALdKSn3/Tvr+WIYlMn3U9uMItW4bpOnMimDcOLzjYAJL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.953015d6.0_1587504927936_0.5453414598941737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bbh+8QU7oIEAoTjTwVhbKxTjSI+8JUMxsmmECgdBXqJjPJ3Aam7jnLAtH3INkmxEjXkpQNRwQQdW6ymIZIPNOA==","shasum":"bb5e996c3ec4215825341f8484835094f44aba79","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.c360ec63.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yVCRA9TVsSAnZWagAA4CEP/3Nbi03EEiO4QGpg1O6w\nuQR3HJXsKjVB55w6sCjTRTKadTvUtQz5526hyxLQJsUm9a3y05B7ZLye4bH5\nTBLCDj0K9uN11yLxtusSmAfV6SC9qc/UVJyQ0HjK+u62GLU5iBux0wfk3NIV\n1JOQmQ98IHeVwhWLG/r4x1hj5uMunfOLHkhLQwudCgtnUsPfZZT+/eBP2N7W\nbPPX4zi1Uloyz08NB2HSVKBCOhj+iSbDQityOAdJ4ScdcplIIwAnz1Ltk3VA\nrRhxGTpnhQaPs6xuE5IJZGssBPGS0lMz4Ui2NCCfoVi9D/kX9RiudZr3T7ZZ\n14pz+w2wEJKeQWbn9NDx6aFksU708eZigPaAdQJn1fkbti9DUxsOFAl4x1Go\nb5bnI5RpgEE0RLIHcbINxrEb2GI1+uJUjcSe1hkzvgU60v/GhsSlnYIeI6Zw\nycUurx1PVgw2UCtwgN5mfWBcb7phh59O+F5Y6GrAioTzh33/JS0ZO8ZY2I0H\nDGtDcBUFNjFFEAHFO3Hk7mipC11lfPAk1+8W+5Z0Eg7Wrt6XD43pqmLp9WPy\nAWr1pC2HmFLNSV0NOErGq1aM8sSfFj9q0d9zcundujJ5e6QimR1PAr+CquRb\nwLq/eLks3cQa2mjzL2AVyYtcQo6YLlNPWvIdF1Y1L090SPuPqx6DW7WKDcau\nzS9v\r\n=00c0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYYlFGT32hSG2HH14r/WUCJOGeQqs0ftP2YnZ1P0a66AiEAikNtRnQ8i118TTvzVO8+1gUwv5nxDF9Q0/yt9Ix8nM0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.c360ec63.0_1587506325229_0.766776267938529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ohO57FGNPBqE5qi6WP6/4tFFCtkK/A54Z/viBnoiKz+6WU+nCz05FFIewZvuMVSZI9wrffrmOVrpHx8Nr/NvdA==","shasum":"840b56d12f310ec8fb12bf3ddc065c263aff6f07","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.d71b65aa.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3WsCRA9TVsSAnZWagAAqR8P/iFRQ9QEK0KBw2maJkZB\nGa5YsmMVh1e03UfI+wNawgyYwDwn6T4Uy2enzEkYcRCJHTnViPZpa9bhqhkt\nj1QgsadsIfp+3Wxx4grcNUdoX1TbUjdgP2xRUv2zxOg8ZRVI+S2G/O4b6QZ7\nG6H1wqiF8yDZXlpELQvxzdLYEZlRGkCC+cP25DrwTwAbeCqp7LO3nSpovB4V\nPB9tUA8DgkwSIqSOHADXlgyqQ/p2IVv0b2NFkEeZFwfsF/IoGd159whQeD6Z\nJchKhjQUMg2atBrSbL5/eK43+ymmr1wQP9hQ5AHkgdf3Bfslmr3TyCXF/VPR\nxm1QHHjAhkqqcvNMeD5FZlwA5rBUEG4CZqunmjJkXm/8UlaQAnF6yMuy2YaG\nHxlveFVQai2Cvs/R4dj/yt+Cc/jWrYy/IkbefaqlXw6YLvxXiKcCoj/U6fpQ\nuicXuJpPH8CX0eugIaXNaNI3p9lxnJpTX8JvDJ90RnDIvIILJL5e90YTB6y+\n6pk2HTeVqGSZXJCoc9Zn0zUnI0ubiMXajeLxqDzR+MPcbuI50fA6gyr/qz2/\nkP9ftdpLfrTFR/+yYVWlHiXVzpl1NsWlmOWAcF4SoilAgkpIiJg7rLYfvtAY\nQSZHcD1PauzWhC9JzHtQdx7C+LCeCrbMM+dPQ2/pZNycqSCdAKLs5WjjiV8E\nSmrC\r\n=/94+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+gxWsIABeIj6bZSXgxXl6hkeoHT0/Z8/Hj/GNi+D6+QIgbAceliYzVP5OM4ibZSrYSdE4CskW2C+Lf893wtRm91c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.d71b65aa.0_1587508652513_0.923248579453392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.58d51135.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-L/mTjJQUvJqGXnyh98Ed4ni/2hkE3j5y2AMMb53vSh09UOn20aLd9rIZCQynCMJq9vwMhtJxZ/4plQ/FMse/HA==","shasum":"65849de3a7c28de902d967b862220cb1f23cda3a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.58d51135.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOT8CRA9TVsSAnZWagAANA8QAIbTUTym8if+020L1/NE\neSQ4jAr19slG1XYbXgO3RZU03vJVz5ql0g0xrmZg7bxuGbfvNAq1F5WFI7GE\nfNK3/xWpjD8z2f5EwkjTmrNaZMQJzX25RqeEU6ndp7KtEefVxFptmxp4S/Cg\nt9OfGSS+hJEMz8lGzd4DNvGjeSW40J1RGCqGrG8HzP0r2oFtANWOGG1xkqMO\nTs7FKtHNjGDb5jo03dv3GOBFWehduppgovFrYq08cGUYI5Q2lXZyWVR5pDJV\nOEdB5QeJehTt/q3PZM5MR8oJ8j2QTm0Cn4FYzggRZQ5swwnhXHiNUOXSyRfg\nF6x2BzkNZjQsa+czpEj2B4Om3ONIMGq51RIwguGm1l+js+u3hjAOhDIigLdM\n+/hbOIDvdmzARSj+Y6vo2botj56Hb3fm3RBPP88dZLzhW2ehCyUsr/5uu37O\nf0yzMDmt5zhX0SMwzBnvg7lQbaWt3onUX90qfkJOIGapmH02bdwoGQIyuCbb\nR5cazNWL1fFEnYAjBcTRRLwhyL9HUSJcDhJ9XXB+SPcUw3wjtEN96KUh1tuF\nTBi8rEIiZKTxad0l21qgwKvlcMXrse7pRbPgWi3Fz43ERLvW4AGRjqX0zYY5\nHz+O6odxNyKTtww4MeN8PqfBLKEDEjbdyuWt2mdVHJer/Cd7t3w6dPdJWRMt\n78MG\r\n=72lN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIeyT13IVvvd8zQE5VjmRcIt6I/u2poEazUh/pRREeWQIgX//DrJb7C7YB5qFtXe1K5nHe9iN/+by8aOqjcOf4VOs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.58d51135.0_1587602683915_0.43219143247242253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j+7rWMwUWCZJ+/x9zSCnXjy7XpPEs0jExcjTWeWpk2ai2sBGDW+JNx7wSCKeNenV1WsE/740pal8yM6tfX/XxA==","shasum":"a95720b3eaf7fc31bcbae7370f127dfe9ba7bf3a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.d0af8ba3.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodntCRA9TVsSAnZWagAAeb0P/Axjq9/ZDXnMwxrqiq/m\nLxAiNUPjtEiFq8OFyAVpSViMsy5bJ825+m0+m6PBAD5sbaISsKkJm7FwkJT+\n0K7pawqNCBIaXsUp5p8mZQ9gfJ8bbqpkDrn3mGgIQZMObr0kwlMz8XXXbA+8\nQI2oWPPBZi6xL33yoTT/spB4alXFZSSWopgadysAzr0Jddierjv/D+shbHeI\nj/SQ6KnleV5iSVPMLH2djFdYH46g9WwH//XXGiEY74KV74+XCq3/9TKyueYP\nlaxMqSC74y/MwqYqDqM52APLbWajEA9mtUGxYQ2R7NgkTsIiwZj30uEfdxjP\nFKOlgE/VJkjSuxZ5txVe/1xW39FlePTkoX/YmXbqdjvIQne9dV3OOzkzMMWO\nuLDgjF60RhE0MVwndEMZf1Yy6mwkoJ91pnDC8lI+T49lrhUYkqo4H26NEQab\nlzHhORvyFyGxVWeIPF3qDCcqt4lHxUIOYTJHMhUZcrashXrR4PWYsFHD3Qft\nyCmMHJ0gkA874g/jm3E3NyF/H1wXRHgiFvoEe/J15LsdDpTIgzhv7JQWUP7I\nHQBcNiBooz68P7fqxektN1NoL00risWNpW/Ox1J/iRc0gOsT8/6IKCnOx5XZ\n1lfnlEWrIbroWh52AMIJgXPMTDv1l6ONS6gqMH8WeR+cNfk1L71De/rFpXk3\nvhT4\r\n=iSH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTJTEidXA0oE1IQMtsXd6T3CZBUwp7rbT5Mm1UBAb1kAiEAmROd30b77sJ+atupwIKtmi2fnT+1C54t9qBaOe0egcU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.d0af8ba3.0_1587665389496_0.8499907814618171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YAeVnz7CoqV16SGXzFwHMX9JEUZUGin7GQr/9mJdkSmzZcQYGpS51KR18bpSRxKdbdfg6vIk7VZQX9gzMwe4fw==","shasum":"c6cfb2092c7e7dadcedf59c1d78c12eb2bb2abc0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.8872b17b.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1UCRA9TVsSAnZWagAA+w8P+wdqGudcn9uOZe5ZV0Al\nnNDmZlE4V/Q0y3ZzpdEL0Arnp8pzYQ0ANcTBR3vAC6xImckLHdIx5qP2NpbB\nn3t6Lpq2iqhMSWSfxmxMURdiMXmgR3sRjeJrJEtfs5Xn6SR6rwDvp5unUQUk\nROu5vvBF/Au7tM4DukjnUOIEepuovYrwtGxpx22+fELGja2wfiyVrSXRJ7JR\n9a2DG2mNb0G6AAZ2grZzGC+6oEOFr1uBJzVPJ5O3I0dGlz01zdMFTNG+sxTW\nIXRfzbEWxQpXO5usFL7iJj2v6DPlBUKgVH550g8zUVR1910S8HPBjW//iOMS\ngzyd2Vi7OPubVVdo7zKEhN+XqHQP2FcHgIrAMlxyiCZn/fgUN+3f3vOXh4p3\nH8wutH0No243429DCMyhvvY5LRfnTy/x8v509Uhk+mP17G3pWcrJNRYofs4d\nqsGii/Jg2hCRUU11DOeSxPVlT4qdTshiDnvM4T0TSf5kAeYF3Qo8Pa5VmXF4\nixIg8rkYrqhZ+qnBte1BN9DZYBCOZO7Z0Mv4r7Vk+bMk1i2FrhWdrmxyOur7\nCGhW+/LryiIjeO+D+VGc0SfaHSY73kXk17uVVFeXyltky1sVRxxGpg2ogHm9\n+6BS98b0+wGBCBuPYakXlh+94MX2cdjdI5+A/1T97HWPeW3GJSOgvIv1ygKd\ng04D\r\n=pveS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGUvOK3ruT0Ln/mhwyyKpenlp5AC9eeHLUq3uXdmL53AiEAnC7zMOeSn0b0CFc1Scwz7NFoowde5hBSriCLUC2AmX4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.8872b17b.0_1587674451484_0.4607012635782657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4+oJR5h091pN0gg1JoT9xU+Zg04umJoMrLJ/OK0ux6FwLHxgHCRtxZpiL5+H9XmDvGgOiBelESK39nbbiS1Ogw==","shasum":"c6105c14cc5455a51c42adf5f8b39a1efae49b3d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.eca1a610.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvZCRA9TVsSAnZWagAAcBwQAJTvNJiYCtWHKEdhT16R\nJfXRzLd3aXxVOg5Rm/ON6K6lgZyDYJx2O3BgJIti18NUclR0FryfI4ri4R32\noiLlqvzIi1g8PgUMyQaO8w4ISVQU0C/AQthyDy3ySj7MmlJbKK867fqW6jO1\n8bBh78+Zi+3HhKinQTwR1rtc3YUhHcSguS9IReF4Kf6xtQ10xq0gFOes3dBO\nIM8BBk7DpVpdiaWnd9fynV+XoRBh+tot/eKDTITKKhzc8vmY2VCJjZUWRxVN\nQaDuTbfEaWmm5TEny9FiBszBSbtcANPTVdjbPq22S7nrZ4nOAjPTpPUKOxeN\nTew6BOl0iLOtJDIb5gSkM9V1shbuX7eyraRZiz41IP/laGI+bi3rN2To0p2R\n1aYkd93OfFcGUC/AkcC5nZnAspMCWH6Hvk8DhQLMJJj4GIngKLXxXkhaBVeM\nnZiB/5VkPMP6LVhlmNH8spbtJhiKZ+m4TrJ1/omC60cclwCjSNpkdyFfyaeC\nKS3SmAEfePaNeX4vWdkeFLaNHk8ATxfU9mrgJS4jRYt5Fkmrmm1klBEx1E/R\nqw8we2vdft5WDeXDlzZb0HiBUnGss2F7PB3uR0IuOTt7duMwkos1hXAwaLD+\nBWChxPdQWO5G7ZzYHL+1rZuGV5L/EJ8wdussDn7MVqM2Owy5EaDAfjHVzLSz\ncL5N\r\n=QuTR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqd2yveWwCpEK7jVIX/8z2957sczn5Nv3pkHLMiZ/BmAiEAzbyDw9cpYr443PpNNcGzxENmRweB8psCRi92iBUEDg8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.eca1a610.0_1587678168922_0.09957474868403993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-moOBKJ2gHSKHN2cOojIJODnp8kFvzhTB+0qaz5ByK2XuIhTUPjSKNaQImFt/p5LRaVUSW6ze6NKhtPniyGk0Sw==","shasum":"6d95ab76b5f9306c4fba998dcf170f1ab13cc957","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.baaf529e.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoho0CRA9TVsSAnZWagAAmloP/jQUcVl0MmLQAzxjwKm6\nZIGmh7OXzxtM2zW6NuMY1sQ2lyVb7+58ByNnjeIg4YJKkrXu/dObI+TJH+/U\no3H3ayCmXpkbbBF4UDRMI8gey7ElJ5FWB1aaD0PfPawiT5IUMU8D7E+6QJQq\nkWSE5nPUvfTUHS/VMEPjXmELReVn+7qjASC/de5ZdwJ++Jke6h3VjVy0o/Ea\n8yu4ak3dDjhISX5mz+MnyrCGwsSDNYGFw8uWh1fCDh7RoXSebYEgZ9at+2wt\nYoDmkvtdNdnTgn5BdhojkkM9pSfovvpY7lrpSwf+CoN6upT8olq1EBNIlBwU\nty5h3/7fdi6YlmttmmkJiZpsAT4R8w9a0tifk69geyztLNwnpHP5M2UD5wrP\naXudI5ybOnNxYU5/dShyS+oUQsA9ZSIMJb4qsixQQDMeca0qTWO9/NZFkXLc\ntudjXt9UMHsLArKAzzXoMkAfMRldKXYwTraj0f2Wcbtrgjok6z88PXqv1+kY\ng8YdzePBILxLSVY/uTc16sddsz1Qns+a6bEHYeBSjG4rF/IfB8e63w19OkAY\nfYiTF3vy16Mu+rVR8+Frir2iJBgxldOOyaH23Y8isFHC+QbhTgm5S68ALAbl\n/+mPEqZIelbbfrWFR/qan93hLcP7QjnZ2TXdAkQS/Hxp7r1nogo2x+q5Uov6\nheeg\r\n=I9xQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLBFm84fRdQaFwbG642b6mb9MrOjJKcWXFMaUhVH3wSgIgO8S4cPxSJOl53ggoihds44OJaAQDEOzOEioos4Zy7AA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.baaf529e.0_1587681843668_0.8455589048202419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nu/0qyUG6aDO7RujoxZt+f82AJno9Zwhm+g3TX5O+tIIZS1+kExJFzIWPkLDDKZxiRBRoQ6pVh8SWFjHsjTcKA==","shasum":"33b0961e42466b9db6fa5dea818ee8c2fc0f044b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.7a7992a8.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiE5CRA9TVsSAnZWagAAPS0QAIc6Ifua0YBjuc3y5Qkp\npteHyrqd4hIHPsUYz/Ng0lYl5RTugeh4WRho/MsrcGr9oobMAtdyj+P6risj\nKEV11UH8oiT+KHBE1HCckiAkTDBRdIqauA/6+0G3WHhJczbM+qIsWs95Y4fw\nPBM9p257KRkFFrthd4aIzEkWEM1Saafzdm69W4Z36/TOB6YyD0gD/Cwt0p00\nOFxQNZHmzwi2jJpeNePvvKnwBUkknE2avemwaaOtm0px78CWw4A9BINhGx/n\n+9zJtdTauZOifmB3dQ7L5J1tOhZkrKe+N5ccz8hHkOa+AQ4jFK0FE8Hm2Iii\nRFZ6zyzktFwhHTaY4JAUkLDH6/ljjw72+irm3x07PPKUpAr+NjFFpCWNOJLP\nUz9mPh12K61QZZwhGemkgxRVOQAnEjNkvBFDg9LBHphFjoqg18MhQ/+OuE3K\nThxOs9N51uAVj4MIt0frql49td/PQCY6lbbVLCBOTkXMsrh1tDUo4BX3Jwc2\nmdOX4l0KeBMxqZBPamlxUMtd37FUDYqBk8/w9PVV7sspWO4dQJY+lI22QlQc\nJ05xyRGdLCpiI/IR/rNm6RU/GgHdn9JV697MaFZf+bMlXdQkIU4g/vQhaf+1\nocCjDbzjJg0+gehs+bDpOg3wrrAbwU/HudfTpYSkiFLjHpHMRB52TlpYhEQq\npkOe\r\n=VZfv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2njSfP+f/Em2wFVrkS5Akl2r3h+NDkyZWpmVuyXSs2AIgbpYbPDjOKyXKGrQzwFA4VpKxuD/u1/CcpNb5tyo0F74="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.7a7992a8.0_1587683640919_0.8527277271260298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DgfMfYJVpKUjFlmSrmcWbCh6UG4w2zgsqJYEkhVJWMIHCyFoekFgC/IJBxERsRgrC6/zSExtoiJwXzSdenvs5g==","shasum":"88a4ad47584b0d7e715f28a8922020553462db86","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.1150d64d.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBWCRA9TVsSAnZWagAALk0QAJ6Yq9u7pFidbp8JZKtZ\nTvifkjxAYZZsKzrLxm6RYIeXDoPR4cJ1jewT4glnfvNg3UsgCGofZxOVbwSI\nBrMBzRaYgOkEv/2g3oXaFpUuFFjYzv609ZrJTmNsA7s2SaWiUGC+o9PqayKj\n1+nils13I79OXMya4EwhD5wdiUck48F6VtUJJUXYfmmLJcKFAl0qB2VJSHWx\nM/NwWMKLdNiVoJp1JnfFXmZGHpD8U9ZO/foT3f3LFlwoGDwvDbvx+q2X/nnu\n7h33CZOBTiqTXLUWDr/l5QL/IaMBRfOlwoF5HzpwaCof2Nxj3zyNWNZBeq+w\n9CMqgkw7RDfLx6Vk+lbO8gTMRosGv3dvJbMcMapSvYxfNSbag6Gw4+1gjx2d\n+m5WUdJjR2TLP1oZrpSHKgWwXU26TD7nbN5Frq3RJkNZhw8ZzhmgGhdE/nIL\n9N8KqTnylltCa/Tsx6sdnqZtDLnNhbYvNHVSH+uJ6Y8jKUGhROnsFJrCOUk9\nSBEeW4JmE4GjmRfqkd5IhMUa0dvtPXe8a3yvNbEuDbubR0m1BTRGZtBGIybC\nA65Rq1+yJeIFjiyjXRotTlA9lKytvzkLL6qcp/EaITQN+TGoWsEvjgIc/OtN\niduIP8tv7YSBSeZ2dK70dx/UG3B7aDUlPqqfQTGjR7IWrlQ/BL886YX0QJqT\nUCfM\r\n=kmAg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBPy8DKH70FKZPMU2WqKId3i/XNQygLgeIbt0wVLahdAiEAibfK8CaNyC9zPmduJe7qv9giYJypaMy0qPuK23VyY8c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.1150d64d.0_1587687510044_0.7062883152781527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rB7PZKjOm/fZX/NddXjk0iJOp6JptGacarXNvSQeCKxKNonYBP7Vk/JjDB2+tp96fvWX1bKwOgIIbs1t4sY1rQ==","shasum":"60abbc6b6708747d580bfd1986e7177f3455f015","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.dad3f828.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4d7CRA9TVsSAnZWagAAOhoP/jL3vRs+5wp/Sb60RE1i\n0WBZykNFfdWXoAdxNtmCjbHRTyJAH4evGWsSHmbT+Q0Pg6qIBGEKzF+6l2tN\nAa5QYpsyF3CtippLKNsuOXuJ8j3xdfJ07+akFfrjOfbwnhF3GqKG4J2P6GCy\nQGk0la5I40MOsQ/QQ6TxLBbO55yz/OHVx7POLqX2k0TS62/UDOiBWdzMnzDY\nGL7V2UY+9gghg2mT0s15a1E5Pca12clqw7ItFvp1eBVXYO257bW4m6MZ5cNR\nhCg/CeHbq7ZKn1swcJ3RjegWZW9lob9meJ3mWiD7Y2DcC4MKrN6l2lHSJQ+L\nKy+nHZP8UwbR5fa5AZdX/w/ISUz2/nTmEMT0MJ8dkbZFkroxRoVttbTiHhSb\nRRpf+A92mpDC/4rbTWW0oU/7EkMMxQP1PnPnTjt/sw+qrsJzTSC/yKlm4rj9\n9RPDJ8nobizno/gTUyUP4MdC4epo7F6U7VNw9LeV1Qzpe3H6JsyI7apgJ1XM\nDo3kdpY5vSyK0I8YhH0k8F5RuSTPA3+TkRnI9r6zIde+Y5Zap3qL7GlQh0NZ\nJdpRYTDtNgOMFeJHhja3zOvD4j5fLsN9TZtvUhNvcyTXqXC4xQbqPxPV3Kn9\ncoR/zMyvTBaZVCnekUCZmx0K2peF9qOwWwvDymu215C7QBaVl3uNiBs5ve7O\ncY/r\r\n=k/gS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfsUvhC11OP40XTcYj222Xr3C9uXXZ79oGVWi1rUh10gIgAbFERE071FkrMs0be41mWwdZnFgd/J7Wy5bF2ek3NtM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.dad3f828.0_1587775355329_0.4749500933082309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KhzWH1at/XesySuy/rJVTBSxWE9Vg1oudhC5V+uFN5JSx3hjqMeC0P8Ik8SDLYF4qSWoVvoeOXh0om5wwAvJ/g==","shasum":"472dd5a314982d65b60350e37a4a43556696ac5c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.1bcdb47e.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MDCRA9TVsSAnZWagAADvcP/30JNiGDb3W6+AK4jDC0\ntgJVqSWlEIa6smi8Vl+Jfj8fW7HuN4dp2aKMeZx7uCurlxAG6Ifz9ZQ6H86l\nKz0RCGkkD7jw8tOHiTTDPAFPYaaZv0WDiQznhOEzi5NqDnyD4LrxiG/MAr+Q\nCiw7waVGBk4D1rlSoRoYgP+p+MiuM1CzWtBCPpxEBCosctWH3/je8BrNNjXV\nHPwpHxgZXwYZGD8HOc+wUleEm+W5qBX9JtBu/MRaxnIAszICzmbkTHB7Vn9K\nqOpKMeFx2HzfmA7T3JUqmw/1NZHmPFOG8qwUN8TiKinzDG3n1ppcpmf8zbeT\nvxe8bE0J+tpnxMkqZQT90wZ1KVrXD56vLKmPM8Jy6mbh8jm2rVs3xhqXvzSh\ny9Bkq2IxHc31t44IaRatJ+oXT55sFT5tn46tPDhWE8uaRi8qgjroGkpRpaeT\nJCvrkG8CYrbJVLsZlkkPTT7d0/oH85G74oRlp2mHmlw/nFbUMTkz7o2Tx52b\n4W2TXX7t8ObNokp88hexUks83WDlT98VcvjPDQqdxKUy3kS5XW4UqYy6YsyM\ndZ3dS8NaKfkmpeey9oWIQ1p+HqVMo8U1vbWEuQDre2Nevg7oKPEK8a2oq8nt\nI3/l7w9JA6iNZZxmd5GAngJPBqQDvF5BHl/0K8PIeWbFu9lGQGqaQwKYkusP\nf15i\r\n=0LKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMIf4+uYGcI88ocvzWB3o34fBYFNAgfKrTwYmhfxcoWgIhALBRk+pZFBnmqcUVUvqKAuDzrxMdKfwNckJYKbgnfQ5Q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.1bcdb47e.0_1588036354977_0.07589922307056618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-P+1ZAmfOi+dZ4Zv64Qxu72gies3nijtmoIySdHG9VdjV/obfSKYQ/U3hIDp8jnABI4SFk3dh4JqCRVeu6TFcdg==","shasum":"b4c341d08824b6a5b2d893e6add7c0ca89cf724a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.86ff1b9f.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5slCRA9TVsSAnZWagAAJnkP/R/X7+HB4KNnmZVJJjUW\nJvd80ipcFtKZjXzodnqYr+KoP84Ag7Z2w6R7dxRHWyz1m9nYLt31Jkmn4kaX\n83j7PhM31oXKf8yHfaS6goYJ3LNHx7PR2quurkdV4fyi3OA54/+QinNoqWPR\nhMpL36WuWLnO6noFOVhgotMWy/xo+7clgvh8p84weBBQeyI2v+4OwUhECJgK\ndAMtQbP373QcghMX3B8vSU6ruAar2wlALVS4qp9klpdmhAV3+h6hWexjGs9c\ncDnt422rPcNASwH8zE9b1JBcHCr9e1gYZmRFR0lMCfT9OVRahqUHuiWy24Ow\n9OLn5oltT8IFCQODa5uDoJUWUaqWF38xud0JylK5eU8RFMddjjcpRYBBTwbM\nFNgEAXPj79cpQ41lmiD8kY6bMUFYzjTbEeEapyh2UfTm5tjhv9ewBbvMLKXC\nfm5cH+bC1JU2ZEa/t3zlT7R8PVudZWH7ZMhU/KK7FzYeEHR7Ddd3/MmZdewE\nooAuz774W4C7MWeSMnqHUaTANyOiJ5bL5jpV5pkr1e3pUwqY5L/YidbSxg+3\nCZWM9kKjYxWY25Q6K4c8ysSYholltUbYh0I2iOuSe0WxFzb6lI34ah81qjzq\nX1WCnxS2Iho2JcKP6LJPZD646fipiMHs+wB1x+BBvtITIc2Ch55Zu8aaBZhU\nn4y2\r\n=S66O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGQLoZQCj0RXfwSM/ufD8vp83c2is3OefQxIcLU1bX2AiEA1MNmE3xpffb7dqcPSzV6Pgq/3gZFYh3iHfn9RIZj0Zc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.86ff1b9f.0_1588042533140_0.7207292569883115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-o8jGYeWh20bbB/sOE+Di+GDRTs7dQq0/fBHVRcZLNRhLBU6Xu3TVpFmtzjzEakH8f6GpjgldE327V5RZHu1kbg==","shasum":"ac5305ba484e53a2e0807fa815afd44aaec46f36","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.54a86b20.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BfCRA9TVsSAnZWagAAA3MP+QBkLx6+ORd5uIdKXiPG\nKvP1JNKilchP08HwUYdJp8iHkczyyehA4x/p+uAT6yBWBg7xqTAD8O/Ntadx\nAtTh4ZGjfsRBx1DOjFl9M47UPrm5N5WuaQ/SEBxoJDBIop1Dh3KOsAzwPB0k\nR14kjyynkihSZI+0qDNzAcft/2KmarFejdfVcG2rT2bGyj3UA+fFA2Thmsug\nsHPlGMRUdL1g50vd9w95khaHC4izxqmIeWNDtEEttTXwVWHqiQ5ptwVn84Ly\nVyyNaK01I2dD3QMARvpGK5A8HHqr8bbhwukJCaChAQv7IhV0wCYr+/6KVtjT\nIq58cPHYNvWhlYa2ht9TVyl7SivGqk6Zlv4dya6BfXwXuWLkcvjN0zHXmrlQ\nYTHLUfejAI3nkl4miM3fzDjFLYAO7jbJycIAXEv9HT6YD+siyR/ZZ+WGOCwK\n16bVeueiPJBGyDOFyHJsuBovzAtPkTKUEgFbXiJvodMUpPRUoHZGMihiuqg/\nRrSwe8huu+5aAKau7HkpsGYPfI6Z7s4S9joZOcjU70Fgp2GLAqzHBfiBY8B1\nIoIAQetSeMwvLnFJhbYIoGt1cigOtPAcEHyqaWgM8rYliRKp9x2j4nBB8tPb\ngxM+jNoTKWqUqhwrGx5kGk7fpOBfbnC1BfnBfObR/jcLJAzwwWjqQtE3vFWa\nw/y4\r\n=s57w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqYuOZqNTMfn0qtnOKCoPyRSo8iTFzACRWUkwt208cjAiBxc6bYd4f/nKtNgTMh1hMZmcSo0OzIlpXm3Fc2v1UI6g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.54a86b20.0_1588043870905_0.0014637512343660397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.open());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `isOpen`            | `boolean` (read-only) | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `open() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IK1mb+8Mas3dJwE5SR625iMU6Ft0/7uuGB96Tgci4OOibNZN1r6RNkI7zfTrAasF77LhYw5ZszUWMqLxW5GQ7A==","shasum":"6db8afeb735f3eb52c6435e3623acf14e1a7b1ef","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.938fd24b.0.tgz","fileCount":20,"unpackedSize":82177,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqiloCRA9TVsSAnZWagAA4+kP/i8oNxsRYA+VrlyYgGZL\nFo0263vFsUUzIph8uhk9xjvSHp010jlWmu0nz91iLq2w0ViWfi30teH/+g43\nOLMEC6cFCQqBijC3Os+bfRMwDVhzZ1OJbVW9q2w+48sOhrhQBI4JRX2pP3tC\n2OnzTosCNEfJ/19I8WJytwgfEU69ldmhrEe3A/jb0UeF5icBa05eLSvNfWG7\nAegIODQLhjeHmZSfc0/xYQ/r02MFbBhryPiuEKux6U4Dz9+s39eBHJmYO0sJ\nZnMWQeTIm3r2fNHm7qtFUkfZvadzN8guIqsRkOtpVcJHayT6dKsvL54pK+r3\nXdnXNTcq+v/m6wmKMqpfqw7ARMMCH+nNGstdX/equUlSTAvXonbpAU6fnQf5\nOkDOlvO4MeiBGV+CkiBvKU4RTA/QgFT62zyPsv7KFA2r00cG0GxBe0HPY/Ag\nl4mkxS36URpNZ/N+HTO/iyCpCeL9ZDI/iHPNtGIZFTlwdnkeXHTufCoRuXZf\ntNGDfbGbFTbSqnmQnp4vVAKQ6Vujtrqp0qXi670ajR1wjYqkS8pH/ZJG0OJT\ndVI2NCHyMY64QQpFuJyzYTkEyIFCUQmdjawN7pZMlE7YIQRIxCz13VirWbyZ\nx9W9/x4EvfSyNnuTsMfp0D2j0TA2S82wm808+G+BUBQgCaOCFnGJZrlI1EYW\nlgXC\r\n=4hqt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt8m/Hxxbp08Zg2HxuGUkmeA1PkErEMRO+sFAy7ly8swIgGxe2X7BQrcNfLk6yqlukr8IqkgWSRKFPZi35FkVHDc8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.938fd24b.0_1588210023991_0.829010397206212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RqlHYVQOAjWf3ninYxyUvyA5CsWg2jsuJf1Bh2ysypOKt2bnQH4RVnzSgNWSy++qItFoV2YtiTYi3Ey1zahDtw==","shasum":"27e2c04069aa81eff91ec0b53936896a079aa306","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.39e9a008.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjQ8CRA9TVsSAnZWagAAmXAP/3FA7W/xDPMdPnG5gPY8\n1GfQgL2qwtxESK85NA1XBscjBkGjsvjyuCev5nWBL0HHj+bDrwxB4LpPaMGx\nLj9IW7ZI9M1IGLl19eM0nrcshcHn7u/S6uhzNA8VGCT6VwIWzacnEklRYDeB\nAgOod32iGqHAzxcuKnfT7Yeb5gry9+ZXAS8burGwZpVpuSbPMiQlurpuJsXG\n9h7I3zyd0LBS8BlIzlFHCNiElWblxOMuJKlVufrHToOTnjwNUI+qMyIZvvFN\nmh3VOWELHXmvo8O/2JempTOtQyJ1tpeziEenfUGGSDowgyF42WZFVf6GAakT\nXznmTSFYP4GABGoBR8KL6mn5AePuH7sGZSnxAMLyJlW2OFgvRraNGYJq6PwE\nKGbcI7fF9tFD4KgPkPAiITQ4j7VBmDGZYOc5cd4zoWHaA7UIprTgCIIaj182\nNpcMFMrOsvk0pvOp+GNFNQ+Y7d6zQ3P592ez+i2Xx/MkKSNRT4j9nxDjUSnd\nCB1yMTQ8w6drnieERr93yD7EvNpMBVFltbCSJVYffh2DOliIqxB7QZjFZe9N\naxTlFCGKCLhHypqTyo2ncroNaBiLFLag2lPTojPbM68PZeRWeQ6PW5WOXxqR\nlPdTNQu1SUfJ3WpS+03egP8xeXavr4nBqxdlyvYy8Rxw+mzXo7uIDSNswMQ7\njyC+\r\n=Gusj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLzVBjw9pWWBeY2Auf2H0BJfeiCFkHpFH0P3CzCes9pAiBwgrIQvOKe1M7reNZGKHjO5ul6uyGNCGEmREjRvylGxA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.39e9a008.0_1588212796376_0.7767482294331658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zlzp8qnk0i2wotM+5QrH13Gj2AFAupzwkYpwzGrcfMdopHhVqU/SPVJk4+krV+DfXyM8GpCp+9ap4cYhg9Vvqw==","shasum":"2f0c212df4dcc84284d47b619c5b9939ccfea53c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.f3b365de.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovUCRA9TVsSAnZWagAAETMP/3dsr/ljvN6BIZWOB99z\n/kpGKrzDtz0CB8AffESN7M1fG2E71Lm3aO6JPrYC63kr1TzTu6Xhz5bjjIxb\nJ6CT12b49B4PWWg0J9KZ8CyRMmI29Cqw5AseOGnhcz9U+RxrbMFiFRkgBF3Z\n+a3apK7JpJ+D3MwBppTndmE2hEDcpDyHwUuNNP/5MbdCy5fG0i8vnXnUYfW7\nhpJZRdYd7eG0mOitv8IGSrkqAuz7b8h5Ev/xUo9uM4bDpg2Z7cchdX0GGfi2\n0GrS5Jor+aWwo0yQKLKBf00wN25dFsSUKHGy16I0byFawb0wB+yry9Z7DBcE\nBLbBH4sWnEeao+RM55c8ko2jKquADXrsyjuN55IqpzWov167kY0YPPB2lKMH\nFZEvA5EYqBsPLrDOR1dYJSaZceOI7dVzze8zSIfPUU4lsgpY1by4HyVobGe/\ns30bO1P6/OHkvcLjp51D4TjDBbyO3vM4mEFVg/vrXbtqIWwYdhLxRewRY0WG\nld85HMI8/QTll+xR7MU2arY8aC9lshF8zE948HAyHyN1lHsZMETPuZiHDac4\n261c9W6E6F7t2xv/Bj0v93FG18eRZeQUp7Pn8VL/XkGaukTQyHpdqztR4INh\n7SOtqjCfIb908fGBsBuFKdR9cnGao5dPuq0157sGyIaftqA7rcs9k0TVDZIz\nMeFo\r\n=Vdbz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGASDA85wUD0Sn/rWE9TYO67Ixsg27Blzzj+X4bcJyzAAiEAuRLt6vLjE4fn2sakM+FqSdoSKmxfhDnsTCVNcw3pZHw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.f3b365de.0_1588235219892_0.39421012670843303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BvIByXYvDObzL96xDfHn+iqFnQ5xxTgxNLS012HlUFhQWexH0FLW063WSfqN1KZyrkbhrTr7bswo3xIsE4aZgg==","shasum":"be8b40015269ccc52938dae903355dad50840f8b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.cdbdf807.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2nqCRA9TVsSAnZWagAA+6kP/jOxdYB0GGccG0Nu/MdT\nKR8xNkTPXBh7hWGy+aiPMm0dOdwPqEk0uLL5ohmBFOzZulLAOyejTLX887lf\nCNp5EAon7Mm9Hd7CZgjG8gSZC/ZtXrjIFjX+IQE54OrCMYClwfpZFY9rwzD1\nd+i9jlohtOR6NQ5LDwZUjpiffHnQH/xj1sVJ2jMSOLzpOWHxiM5T231eoVRg\nb7MV3coHS7ghFkt035GRyFpFZAwY5NEme1zicMFkJlI9rJe9YXY9VAgFKufQ\nzGZdDmu1zJTXre1IYRBllEVgVo8zRUnxzBjgMgeM65Wig6EM7UscVxZSRoKd\nGejyyphOO7FpJqgrUpqg+uEchqs+8w8Io8cRfIUcCOTT2RD6rQmzrS1KeSJL\nTBWj4Y2UlKUFKwn6zIs9XBZBpkonqBAOSuwfmbbf3ErnSGNFSg6UMWkXVnGC\nLVHVL4cf+iBzGMvIJB+W1uSV0SQE7NKIQBNTZ2Pp3zD/BH7RXm5hOEkFQ/YC\n4hCxwGT8NCO7c2jKzbOiW2I27F8dQJev4cAmG+eV9ou0bOfEyEMJL30Bj5K3\n//qjupH9dhOy7JFNwsecYLVXI9ZC9HXi+z+OKHWwrYnzrmhVIPqISyAwDmcv\nSdym8/oYvZoQk9HFI5TrotwZmaAvYDuXKjJaexfRpFhAkVe3Fh0jBPCXfhRu\n/b+y\r\n=rMKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIER/VGp22IVW/laLJCgplrxV2NJioK+2zgGhAul7RMq3AiEAzqIt2WD/1vU9UPC0XkBeBHGrZRMui5PkztfRDafkD5E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.cdbdf807.0_1588292074252_0.22984328848583613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fKfciye/6HrLBI+zFeuI6mQtlU1wbRjBBGcoyAYdp8HysiWCHJXKbhDJGwPKD1Xxrz+bv46dZgxYZvk+SHrSrQ==","shasum":"898411500ca5aa13015c41206a6d167a5cd4f98d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.9995ae17.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4jCRA9TVsSAnZWagAAnUAP/jw9qFk9YrWk8T1HwqYl\nqQ1Hk5NzasrJhQhmgChAkroi0HA+HV/92KcuJd32i0nF6wPz6wP6swk/tqH4\niLVby9Oo9cDy/Fx8hUcQMh1ftyVdIsjdgMsM9H/fpGv1aBM4X8OXyM9l9jMy\nIWaQqNIJihhXAWNAZrhL2Yx2J+lopLq7f7B58CcBVNNp2+4e5jVDjfHGGtvj\nMuX6qUF2MhCHNap+llvAPofk8VKqqAd6gkZ2NQl7uEzJuwmphKuNptiE7wiu\nbKStqz+BWoI2K7zk2CgYNdFMV3mATRpsOpVXzFya5i6oSAKfFv18giVxJisv\ng+A166nMs1rFRxOoJIfY9Y8rYoXd26GBqLCVpadN4t/ka5xpiYdaKjNDmnzx\nHjowOUQmtxOcInrGF97VEGxlZqSjpYAHGXjoGH9fAJN7SYl/MoB4/4iMv5yl\nKYVKGEFVPOJsUcjTt/J9MRQxN9Hi70Csnlc9yNpVIJx0Tdff6ECd9oElMRRi\nFgAeqpwbukmFj5T6x6cUSw0Q5RNQ0xKyy9BnhjazAlYjrQiqyKFEhjSRgCiK\nCR14US/c5jjSD8ym4pnaE5Z7IRTT3IP7Zsj2bS2lkbcCkJAvnmEu8znjD8Fn\nsufa4D6/D9t1tah77s++K+Cyh9nAI45P0LbP97XxbdRJjDDDSSGS8Uhxbzfs\nLdU6\r\n=hg0w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyEHm8iWR4euldrVnAcxoNAF+gdEbIOa1O5BwESwPWDQIhANPKZ8m5Ys5YjF9AxvH1HEUBRheEQ//I0RNnAFeKma3N"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.9995ae17.0_1588358690989_0.6390978487767256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.457bf035.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JJNAflzdybeYCnYFe3JB+OTaVGQylM8lRhIA6rCksahiTpYmu3KSHgWFmc4YkqONMs0JbyV8SRBybbU77jBG+A==","shasum":"4066987db3660646c449ba1ad2762d49919c37b0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.457bf035.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuhCRA9TVsSAnZWagAAFYcQAKCgTsiQSo6w0FaIalsB\nAJN7oE6KNPNhxYAauDJOWeIawMGmY5a95hM8OnuhRhYth0B4E81ArGxSQ4k/\nsB8m+JN3ukFqkVSPjllHVBJ3nUPxAfc3RwIzwlzhkRBmSWkF3YHZMhZh8fFR\neHc7XAjJYMmOejmDLIXsQBLOyfoKUwHNmKjq8nkNT4jUCyxg4Nr9JY/1tvZg\nxhi6oAxe+omvnutZr8qHj64/esFhUiKj5cXRJybe/jEgVe6JvjNoHKXU3odp\njZRbFJHAPZRp4s/E4ktWRIg/984yBg9UMXqG8vDvqQM7cOPVM16/QPTxFwi8\nlgub9bOddz35zutZnpvbcl83xR9yMB7m56RGEL8qtYWttNb6GAZd9gr1UqI5\n6XJoudw5B3o4VezqXbrXHJjTal+j3Dij50iMUVDujvJRZx9XCcZsxGwzcFi/\n3dEhf7GPC2Iu4HRCI38ydmbEyNuv0H9tNqGTLzbobkgT6/Q8Ie8Z9gA5yQi4\n7gOQuauRz1qwfKG3B5VGDpUHIIO5qc6pS02zNG89gQafFVVQIl1fWSPFmUvt\nwW2PNcEmI2rqCyHsoXyA+zA6lYC6IcojLYK4+uaJZW6Q1qht5MRfEwx40J+Q\ns4pnJILNrsYwh53hj4hCATJK9JCjS/zavzBC9ullX0Elp9FRle2XyMv8CTBR\nook9\r\n=45fH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEZGjYga97kD8CxIazLQLHYib+I1Xgxwlg52Pl77FOnQIgYjg5f9zeSvWHxj2kh6eO+lFEudTN3q8KmR76GYgKKS0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.457bf035.0_1588366240584_0.6257287251869137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VPWx7mYmKPpCcy67+fIJaSw/RgivZ+zprBlYYIDWL/keJbSz0+YvDz6OdbjHROZvdrR05kms3r2j1bL7ZUsEDQ==","shasum":"f1f7b7ee70845ece3b0a45416299cb26a9be6f00","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.2381fd02.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJO+CRA9TVsSAnZWagAAqFkP/jEJPD7YyKWY4PngR2aq\nDJOFa93cTJ77TTWO2cr/M7TtyJPX7s+sEV0h6TXMLh1KrrS7wuYVPEG/tIy+\n7LFuu7owH8k0ILwfLq4KLg/at65I4TUuMzMktAZBEXZvmQtIVsZyr0oDicq5\nFCj8QbRyejTLN5fKMs1JTycSVJPrdyWDr7XSkdwIqOso1lzZyj2Zp/yRtdkg\n7H38eHppuejAgxK4M0HpLkgAMvejBZ4BydOCA8I2kPt4i9o/Y2ptI1EKv1zT\ng6J5upoBmchGzL4+0CAcUOSHvSluthxeSd94xOySmfp9gUfZG3PquqAgkoKB\n8VXeW+MJ3fcewOQf/WMLO2D3JbOeh8L4O71voagPlDrpOlt0D5zrXYN2wPfM\nRTgBw8/A32ePUUgihbY2Ayr04qfEUQdfGiXL8EJugp++5CdVrNJaEVkY6L5+\n0TzZX7XYur/RnLt+yqx4iX39gng2I275t6tHzZyEPVHMe5uTdYpS8O/ZMEuf\n70cZr9XccK7O3oVTgLkuMPBRdCVpK9WzUEQP5xywkfBBxjaim6/Jo7irtNBO\n2A/rrVoXBxj5Grnd6o9HndPgWB+DkbpPt8u1FR6hbrZsOEzSAepdSjZlGK+e\nHE5bvRmHSpxORWu/OROMAx2/RzNqAqIS9qv5EDnHltdLqRBbro8uP5RGPq7d\nTQWM\r\n=9Mz8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWq76j8b6Vtb/kAOBIV3FJQPKg1R5DSsiDvlEaK2XDpAiEApAg9ubLqFPo3Hoofn+KaYwFa5Db0XlVhyUGITA5gLAw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.2381fd02.0_1588368318011_0.6406536737324637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3ITTbaVsbu08CeERsPBF8NHrXyVY9Xm7gm54/EXL9wnS+m51XaTTd9EXwiwiVh+pZWNKIlvDQZojohe/8Fl2/g==","shasum":"cc00a625a0dd489290e65b2a93e7a4cff614a8d0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.b2ca9b57.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJY2CRA9TVsSAnZWagAApgAP/2fGsYTxXF1OmIV/anee\nEzvB2sDmBlrvRdwBXL1+/I3Opy7yP8p3KAQeFq8oQ5/T9UDnF5dlfRo6I+LJ\nAAKnjP63JBDmck1wXozoVRLRojMYBnuTuQk2LenfgpOx2D2xF//qrGJtIYr4\nVuku/kAXprA3srfGVZiCWeKxQE27BmcH3KUVeShEkY2Xw8MQlKuTTjyZWW0e\nHEY1xnbTS3a1pa+p4xOZoR+RJ3L57Go8WDfM3luedOr88T8v56EWDShaqIZG\n1q+h38Zmx83busLMS7oPaDgfqSrDxz3+0I12VyFlpDm/sAnoTs5QWm+tolLP\nB+G41GxxtKC352u3YYR3bCZWGgbldp7N1EDKKM27Vbdx9/Y+Te1f7hPoMQ7f\nqAP3QjmWm4p7vUYojmbD5pLpcv9uVej8rNejaKI9yNINO8MFDe1iz+eysu6q\nmWPOYGQiuVarIjIj92UDSoN0467GmupA1vBdTGu2Eez2XPWTniqH+bbyM6sk\n9H+yCJqlR0u+WOYLwdIfkmvO4MbZmTGyDQise82Qbj1bRjF2p93lCdSsGn1v\nByTFqHHcFPj8UfqvhrqDhScVOicY5h2g2VkhrWRUxIAEaxjXXM7kVEkljgr0\nJQWCSfsIOQwLWloCHuEwn0w20u0CXc1k63VS1rH25a7SFOP/IPrXGzNdVeDz\nUgmv\r\n=PkDH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjTXtBgrPdSTNIrYMvNiQ1spgue6BLbUqXvvvSAPEHSwIhAPjxDHYWZruDu/6sKNnuY4mbjP1bUnw0SVOa0Rp1DNlM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.b2ca9b57.0_1588368949546_0.34681491583921265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FS1J/Av8xu3rnIE+0uI+/FfFZbPWyjp5W4RbocofJXrLdWyeICokF047oMgBxhBLMgNKFmplhxFdxVY53on/Jw==","shasum":"9e380ec9ee1923185d4d5d355669a9b5843f8606","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.b2b088e7.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKO3CRA9TVsSAnZWagAAJyIQAKBVki417YlS1GGsAso1\nb918tIcGLoLyV4s3PWACBrGo/sahYdNRqH1EbADwAm0nXNgCwUniynWevUta\n7yfNofhUa/RDxy2UeO2NKDefDGFY8B5YjyNcqZmB38sZ3Y3nz7sbbC9UVvEA\nR0xEdQUIoV+udRphZEKVRJmCLKyOdMb6zDzAGEYSro5xiYwB/3cx1W36t/rR\nml76J5es9C3OCB8S+vyxn5hOYhaMTnafYcX4lq6OeaCZhejODsYF5PVE82bD\n/4o9imG/D7bSmhOr/xv1RLJOgQAgdyYwdnz04MKwURYLCP/UNGqrJq4clMrc\nibk40iK/ZnLvbfV+e4rQBKBhAi+5/96orKb5dyyT7fKTw7yEAZfScJ7dcR0E\nc61/vt9mlvGl8GSuNvC4E6K7kK/JOnlPU3T0M1eq9iDlA0OSG8LzDfKDNWXK\ntW2NJ12pQiZfrxgsQDfGan+kA/9uuhThWq7ZSY4CjYdEhnTAyMf2vt87g0u5\nwHbEjlTQQulniVgMbHZNJHYGcHgozK/d2QodPx54cPSMN7NRx4nUJkzQVyOB\n0LRqIyspyp7YMb4v3L8fb6bnrQDXE9VWDVZ4T3Agwn5eKIewR5E/vZmKUgiz\nHKWHaxcI4PMO+iRzW3zKmPjJg7ymdGDxHM5arh0zxfex6IxVXmWCfNJOxrsJ\nRlE9\r\n=+dXW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5qPjQofrky9dy7g/OZS894rVowavyXfgPAIP0gnFqoAiBAmqML7zXKadfrK7tIcY/isPejnpT97scScnCAJK90NQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.b2b088e7.0_1588372407035_0.3836279481715483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nKba5ZOT65sthNrwYbuWiSg4rxuuCmyuJv4kLgvju5NobvgefnH6nXdPaVMrO7p3WbpkINIGRrD0P4PoK1Iiow==","shasum":"079c4886afd6c00cef4c34162e88c9a925cef098","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.fdd8f69e.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvVCRA9TVsSAnZWagAAx6UP/29zRrIh52NRN71Tw+ry\nJ78t/q5DRyhjNjRXLdckP68WHGxTY5uG7fjVDuVqcbFtEGHxG2oSq/BYw22b\nvBWdjTP2ptgHATGHxB8Ouko3nT3nya794mvLcBnc81+uAMWdu4P1kLmsA5RH\ntg2UKh+3yQ5EOfsu7JLQ6NbWBju3mvl3efJDcI5n/j5y7WVgdVruOFW+N4LW\nZplNhA4npKm5HI/kZo9XjeJAYmFPwTOzV0W/VPRZp8H4VDLu91UwOcjHWOsR\neZ0MtCyglpRZbY/b9CnhOXY3kzukZNC00ZWb20AJdEzOkc70tXSBPcbwUX5t\nAHiC5FOCN8n4bEK/SI+q1IiSivYO1ooAD1L0uTlKxvjoYnm/MJeumRs5nqBz\nvt56t0stlEDJUe5jgYLol3pRrt4AZUBjg1XSlt+ly8WvDee3I8rXPvGshNhN\n09piJIRWTunoiozgm/RoZFtlvDLo0uCDQZG5MzSiNjR5Rlq9AXgohV8NOsSZ\nVl4j2xyyItRlYtpivlFnu2mS4DrIz/UJVUCSfoQ4Zp/r7G82QeAIyJMvSfUL\n/o5jtLpIBmHQOPyjh/xhFa+s4WasWWWMVbbe+HhE3eJEfzXh1gm4nEjHG6rQ\nuCkJ42VqSyYOznmmbzN+QkmrBpilIIJBO+/T/qpLjENMGtQf18KvOeZ1U0F3\nUojj\r\n=V7DL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw+mIkYiS4zvYmKDPOlJA3l7HgDpzF8hA3MdaeJBmq2wIhAJCHZ2PVV+31RdkvQCebTLD7sYlCiTK7Busiah6rNY9J"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.fdd8f69e.0_1588378580662_0.5143567219486889"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bU6PfIM710y9zEv2Iu6/g2r8Rs8zF7NmUx+ZaHgmjwHtEO9slnOWUHqq56rZ594HEHFXufLuBAWLeTOVKd7IYw==","shasum":"07c82ebeb151e851ab9b53eff44e66607225074f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.730f45a8.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery08CRA9TVsSAnZWagAAXekP/AjZcbyP9OddxMvwXuMh\nNfVqdWTJBDHFqvIve379pUjL4oNu+MYLK8jTwQSfN/IqEGFVaeFaGxRBQXH3\nH8vS45fRRbxcayHA59i6IB71kx5lKcUXFTOTiZuoSyoOGhoPwBemWPNIBjxU\nYfO+I1Kw4zMabHtN8/qbF9V3tZ07UNjHJyEllyVJUs23+Gbh19UGMMgk9M53\nJpDNRT548AliXd8m+i9vKiW8hWYnJBiUoaShU4CU+Sf1viR55NLlP2MWtR9S\nF8svHh7ZbHYn84uaI+5fMdFktdA0xGD294eeNbrdIYwvg+uv8xP+s3udHjAF\n3f2dcGmWLkn/XMGcPLAiqxcVRgeqRVmPOwfZoLdZTsE+pDgHzhqUBJQwxAFC\nsLw0PA5Ag5kMDX55zKkfGQ06oT65BMHWaeO1rnT13BGVeoIfXbCEfg2LkXYO\n94E3Sja5DVziT1FrDYLqkVr8mfSfRTV/rbGxJgISMVhrZUIks0pkqNkQuXBM\nPF8wgb+eOgqQu+NRXwobLXYvLnZtTw+SEtn9IQnLZKLhjHFheoGrakiY7S/I\na8DQ34jA935JOt4RQu8gTp0z+Q37bAjfcdJgpvlnbPOxTySv3G0DRDbwg1b/\nbhJ7BWkS3OHeB1bdyCqRrV1vABMHSY0ljD4jvW147jRSXzNVaryUC69Lz5tv\nBMCV\r\n=Aiw8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC81TlF43rHbQ6V6AhvLvbyocVXY+OZDB6rnvG2taMlpAiEA0G6pxMErcsqc7hzAL3crggbX4YjZPKUxBKoUKTmuF6w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.730f45a8.0_1588538683639_0.3963095598673554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-K5Ur5OGbUv+IIg7eEtvZ+3LJFhHDX1sE7fqI5PjV9S/aQN28CP5ysKsKA+sHJdtFmUMDW+ZrqnU8eyyik6AH7A==","shasum":"2ca97598c71b5ebbc20ccc578ad70c14e87b162a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.4219bd20.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXkCRA9TVsSAnZWagAAocwP/jLgmy79uBvjSCHMzsZa\nuK2zBzCkxn8ZQsomhjzyY2C1ND98+YLGrHQM2uTD7A1vOIkv2b5mhpIg5i9Y\nfQN2yeM6+9OVrgtyHcu7ssnSH6Yicd7+eDjp4aDRVSi+qcEpBlDwlbJg6W4n\nzJZTyTN6aoSkr2xAG6FJYqoyuuWciyywHEBbiYycc3D7TVn6GQg3l3b1GFyd\nS9VwTOpFCVPlKLvDN50bDfql2MekuNPO4m2PILlTD4V7Sl/F5IWd1I+ir8Pq\nUaL5M3W7BbuTYT+4CLaLqljjJ7iCWYlPSjven9e1LvEF7mE1K6IU1L9pgvfJ\nUOD9PeVpTeQZ5XL3Q+H1WVsa/pL4QpwTgPSgP/CnvlGPZ1OdZIWq4vFvQgr2\nhg8g3Kp7b4yG+tYXH3CpzM4Sn4aqziX/aFmtNUdomrsSfSwAXYqStuiYWk2N\nG1MIt32EOBpjwiiGlHG2gviJ5QsFEH60mAWWd9iAS1m4FJkKxU6IqzJvsGCp\nlGtPUDZoBMQ1SY+2b5E0afefhYd/s9K6pVEeJiLplRTFsCyF1Kv4I/YhbsjS\n0ZCZ9tM5/yPhvfYgXlLe+0UZ/PFEB2Ou4sjWbvUihTk1eZ1Ecxr0GOly235T\n2AvA9H6Lcj6yqDo/6n4DFivNR26IuAXqt4hFWuUcUqzk2zLwJ5vJ4FUszQIR\nIXY8\r\n=1jFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZE/ytu9YgkaheyhzBBa64AAxToj11C0J4jPwCyLO7SAIhAOTX9Bn/YdYtp2xy7bxdoX2anQIhbzuHF6KKnxDZh7qk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.4219bd20.0_1588635107611_0.20578685218153603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xZnhzOtODPT/8LPZvzgFe5y69NfUBK9W2Tho2x20pCg49UeED1y41FXympISGSucmQCFpZeoKnYyZfqb2kqFkw==","shasum":"78bd82d7ef45c8e3c8b9cdf62b8bfb1e457b32dd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.1d83cf6d.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5cCRA9TVsSAnZWagAA3fIP/3IurjwYBC4w19Xo8oqs\nxliXzLM3uamjFnLLkqzbwE779gbwrzROil0CIAar8MN+ciclBcspAO9EiwwV\nlF8cNTShUdj7WFdKMNBvWIpf21gWYio7S+lotzPXfazyffY8Pd905SvErTmo\nUelG1IbzS50GFzXw4DeA0X/9T8RBmnH35YMmKlnf2+OHs1oBMbxvBJo9jdBa\ng6jEfO9bz+BK2ClKERO55UsA3aZnWGHnoadprqSE296lDJw5slS1ah7qploh\nZMPPo5wOkLXJrSq0+V/t+Gin1LqIjqibr6IHR7HtekGW21MRwy+ifdhntnij\nzvP/fnBoh+uy5WHI4H+QsifGtkpI1h4yW26kAY+5XY4yByks5+mDf51FZgzp\ndvw6YdkCasU1LDynJqX+XLGs48ZMGWykOfyrgMG/rr7cr3CmDbcqsUOQQFQ9\nqMkF21PgGMRzzwtQPOaXkK473QojvKsiL41bGKoHA0WScX2aKY/c9z9uDl52\nq/qb/j8dS/pDd9B+SnELkNt5W+dJLH25HNprgbb8zRIgc+uPM5ph+PNJJJY/\nKmeIhIdxUS9JHWkjLGX7Gaf2DAlBvckT0XdjKQ4cKqrcLuaocUfwNqkPxuj6\nLlQIZ0TcoGqIW/rmEGH/8wf3Y6vrXTaf2TwqEVFOWcIFG0F+mK1sBV0BEE0V\npYp3\r\n=CcjG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/lgcUz8MCMgbNdKdd/7nEVl8/tbxkfluQSS4HOx4aIgIhAP8hkKhgCYo4BI1MWh/luRQJmltVf0aWRThpSFFOX1XT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.1d83cf6d.0_1588698716089_0.1541825269348014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-htU/iR3/7XcO7m83QTidWkGmEZRp++hHMv7W3gKpWDX79eq8ih5eTvFoEq35+XwghN3A5PImT2EasCM2TwbTjQ==","shasum":"cbd8c9b15dba89482fa36ca5391c9e4ae6f1bbd2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0-canary.3bfc63aa.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazOCRA9TVsSAnZWagAA24AP/05ABcHAZixe1FvCeetN\nLccnWkD8gSvxp4/p5cQZnZ/C+FR7hyJZeFVfOgGQBPDceFOSPzZ6uk9hHVku\nP53hfUfbYRZ4TovBqkZrAGY2fVJkGEuTfhKobVbQEWQs+CTiE49ePUuemkI8\nx4xo1rUEdu2GDL6UPKOEBnbdQbWbrZTS4AR8LiSgMy1qqlu0c/ccHIXWOS2R\nVDOelsV2ewdywbOkkBA3ix+rhsTUJEqbAqE0dz7Jzq/PkgDPlOeTqwh1z9vU\nOeh7tWQKV3ZGKb9dnleHu/tKwJQpOyGug+SbL2AWeArBFT8ye/WERfKV1EEu\nZifaOOjhY4kFAEDSu6+NPIeCot4OsbZzXhdivzgIUoNcsYou3eUZXMO/dZk9\n+iBu12/ViIwThNSoZPndgFIwV8ynAPqWKlk5GvjXouHlEAtyFsMhqSbhrNCW\nmqX0EUdt12i3DKOUaLwt0xg1JJuayAB8mOgCrk2z9wnDUMSbpzEEntTV6gEG\n9SO1/zOw49sS0Da5a1sji1yoG1GkeZamuvEgttUOQhXOqEsrA38NQtlcNzBH\n663D1m3wurPwCrSg/MV9+O/OCTbG6xW0C8ZpKUNi8OLVMAhauqqkcHW9HFHp\ndxNVHLf/oJn2PHgV3QVwvtGPxn1OI9f2zNrfypM8OXVgShIEGTFYsPmiFDzt\nRjAo\r\n=dc5h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuDYb7f5bo+pw0oNeU8YnsM9wrPseLtVPBpAk2zllqnAiBwpvDgwthGbTWeB/tD7gbsCFm6Ys7NHABB74kVAShJyA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.15.0-canary.3bfc63aa.0_1588702413920_0.143685450533521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.15.0","@material/snackbar":"=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-snackbar@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-ubGrDiHJhRc25G3WuJYXDppU0vdBmIeqZSo5v+zLUASCDPr4mFlzJnwys0lUir/FK+YE2I/yUDKyijKNtSRVDA==","shasum":"93b843d357049d602732f6896dd0e9ddf485a6b6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.15.0.tgz","fileCount":20,"unpackedSize":82670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepUCRA9TVsSAnZWagAA2uYP/A2QioD4WtW6J97l23Jp\nb5vYjT0dW5yQfxcx60gps35QcpZ/w7lD5D/IOQzbMT8F98/mQa8jUd9drgb8\nFKkl2U0W2+HJfaw/Z5zrgERvM0Ee2wminVWngOnktOqGAoF3catOzJleAUML\nheslchla4WFwmVbzGQ2Fz6Jth610bYMRTKtijMIKZ9Jn+naiY1XvBdKM5csD\nG+qnJp/SzPrwceZqrzgjxWl8toON1SC02DH7TMrisMgYlI6LQ/4SOwthC7sQ\nfEZQht/spSY+Fg2m3X26jeJvEd22SlKHAz9ObLLgXVgNpcgv4RVQoJo2p9Lv\nTwlX6cZjZ0L7lMunqlQPbI69iDgCbJ0EJ/2h5cqLxr3b1d8kKBDZKHaNpz/A\nK83xhJ1xYtX97/ogG+T2GR7ua6dFyoIuw9uwpE3qQn2jopEY9/zlyFt+pGf3\nz2elnd1tB3WNsQrcGv+j2nWaNgWWJsIkc7jh3g+tsUKWTcoivS3R+Wflrh8I\nxfzQEF6BWehpgLLCiq3BwwJ2IjTccmx5mGfd0Mt8sbxDssfIIXfJW3vRdMo6\nF+KL13a2jajQSNVlnC5wm8WYu8dLw0kK+adxKJEuiwc0dIE1QCMgBB04nOK/\nqDOF/FmpftoHL8D4fGFgfPhtR+Htg3CoLd2+mJ0NrfT1yxZbt759pPR5KBX7\nLMKZ\r\n=fJN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2HmBkYFXFbpdrjP7qWdcVgxTgIaWpmeoXZ7ADKZP0hAiAFZ5pQrwJ2SAovZudh+pMhYOmvLeGUenIYC0cANXC0pw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-snackbar_0.15.0_1588718164227_0.8038125254174955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BZn//7XeZOIxv+1vlPQA9z7o+qbS30sweMddZGBWuo/ne8h9xqvE609W+HXOcuDGxN0KwNwrzQV8XjFaU2nmhw==","shasum":"6fc1ea4334e1840a7ea82a5403664bd1e99c42b2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRhCRA9TVsSAnZWagAAGI8P/jSP483g78z86KM5p/db\nQteqAzhZVcoWn3JJhaoHzEc61Bx2PsfUy6MqSGXQRReu2khz0uTrGCdkEoxS\nooDHVkLYgLsIQs/PkZSUB/+Rz35WN3Mr+u8Nc3HrMLlHJ31SNENylQ5KGIuI\ntk3tvhL+ziE+kiZGqA5zfmoV1HNGdOpFX584Eeqjq9U2ZZkuaBVbASBGb3O/\nh04cZjJr8jHpyg3xh5KsPPRD/Zy/rQo6OnVotXnFtNqcO7W+QYorJIS6JMuG\n0+OutBqAnCxNWqZtg5u3EDsKRcxXiWs0TiPdNMl3QOjFcC0ApY+UvwMGdfhu\nKRvD4hxKawmuPWzSJoX0RJRohVoiMEgmkSg5ehr/zlGxLAwkSyfNSZMeDM0X\nohCLa0H9gPDeBHKt1TW1BtlCMIA3LsSt2mZLm6GkM3R5W5cjYkOwgURql+iO\ntN9hHKPxe7LIm/jT4bVOxDUywTc2gFK3o7JIIJ46KbmWr7Dft5t5HeT8e+kt\nB3f/k7dRPMz0RB5qOhHR2b6k7rZnRjY4XIXddtbmmkSeDC1gddv2h7BFe/MK\nznyRUCG5UrrGSMC2/STuiXCMY2PsGmQ0zUj1uOw+J+3r+ZDXuYu/1CHGzJAI\nG7KmPyPsJGG91OT02KAk5PXzWquudvdP1gcf3tz+rOqFog7v2b/OWdcNsYBN\noz2B\r\n=Fzny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIDXHeKNYcRmsceI7Zl0yhn9XoQbz4CTdmEeQD3TFTpAiEA47rXjzDCMabTKo4P5w7tZU3NDPwy5P8GRY3wkc3+bRA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.1f4e3d1c.0_1588802657228_0.20610477750174372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jpUyVinghwSrT80lx817WHJspHBunL5gWIQFuribntjNemXm6/maHa4UqzIK/1pnvRVRzre2UOY0sTUrZlT3KQ==","shasum":"25de46accc9792166335a56956665c749ea77af9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.bc8759d5.0.tgz","fileCount":20,"unpackedSize":82705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZXCRA9TVsSAnZWagAAPyAQAIkgbKUXCt37q8nkZ+BI\n4LzIZiZK4oFp7HcypaWv1fp923E2790vACuznjsUJLrQYoroxukTQqzvl6kI\nq7ZiAaMikz1RjsJoOqtFc6pihNsTrInp7aLdTH16NcsCE6K5zn6RAY1fhE3j\n3bap9RmOgQ5MBadRTUcLnUcdqrjXVOAVRWMkIB7w6yZM9c34t2ZVQyMmRz9M\nyqTC0SiwSJkvgMVB1ZsFWDrW32aoIQcZL0C+4JcuBUnYRVYPQfwPznicjgJv\n0zIcJEbG3f6p0HpXin1ABUoJa7eKZ4NduUCGoopkLAcLnDioo/BI7av3H/sv\nrNdeg5qC6kq/I/4UVPqJyZUFZgfriN5kH+4l5yGLeWqKr1qOuLuthmYJr2gY\nutvz/GRVMpjp+ZR9Y2vwJumU12Waad86d6vt/YJ+bAxfz5BOM2Jsme6IOt/W\nWhwZJjl8iPigrrepQtcf66LKkoRK2LElTzPwdCs+ur3EHShjQLXffIPMhqXA\nJ44zxMIy1NHe7HwZct3rrDzGgcc1Db5Yfk2NyzJry3vPLeZNjZ0dCyqoiz8C\nXizLqjFHegnD4YWK0xGgPdLYMyTKLI1TF6tqFxyzKRfdAD3Go+MwKlbK68NX\nsilviddSZsfhGDZsARCrixoEGd+pUz2ZfGy1zbNygb/E7kLKYUS2ROa9KNlL\neaON\r\n=chNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVgtb4jRfyu5tOI7+Z4GGtVs04cXWn85PsNGqwwuUI+AiB3kIDoymDZ+Ls04wqyO5AvvA5V8X2unybp6yK34cEgrQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.bc8759d5.0_1588893271131_0.5642653910086881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Na4qw7NEeleVui+WBb6LlDIb+R5VHdWjOMW6f+7jn6eIUvEMIAknRc+ubxRBlKAkadcu6KaMcz+6B9wdAGfnFQ==","shasum":"8b5acc63dcab350458ae643828ae3805e5e488a7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.d1379acf.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZmyCRA9TVsSAnZWagAAWxAQAJIfseqsDL0E5N/ZtHS+\nXJmkeFy7zcnj371J23cawrRDsqI8iUlB+l+D4uOPrYcXvIBoSgbpzyfxzXbU\neY6O6QfUd0SgrpooVZYiewmO2A8khRBFxyjogkinNBVvvFWUG0gqsTXVlSQU\nX1SPq1u2mP3a2XmLq2lNQfD0Z/rngihS/mUzDhU587pbL4bhY9BHIg3LVE4v\nSHdWPej/xuDvnkhXM+cXhcFyVqBJsbjFqbTiAuVI1kXOvC3+RG4+gZ8JW9x1\nDMaFeFiObB28D3ZWRqT3v0SfeegJ3Bs9mgGeE0gGYtNjsakfhiVhp6ZINcpQ\nR+H6TZ98PK9RhtNJbam7+5P26rB/9c14Tc3s83t4Tb9N0zpJa8fcZfZEhJRu\nEObUIi1Q+Gbfi0TAppZrXfiVCpd2GQw1kb8DgUDyV0mQVLx01+XfvX1FQI5n\n1mkgoyRj6C91icFkV3hPL78kox8efMJSsiLa8HJObiQ9/nUH643pJiZkGqIQ\nQHeeKRlVxXhpz53JdE+7KxDwg7RibxzjSmM5Kw1y20r2NKcRuizf6Gypcyp8\nbkrf9mEhUIE2Mao1JsZKnzjKMlOWIA5nawNAxcnkT5zqOYkTXRpJeApStk3q\n8SxXQWtUPd57FAb1giqDul6F01K9iP1VdPyghT/wuEWpggGvPgUB6JaLKFyJ\nZpJU\r\n=byZ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKyEQcDW3zGJvF42L9T29IQVeCjdRHYBSrA5tw6/bnkAiBwAIo3bzfGo2RppqFoIaY3tHpHycEE4LWsYhpjiEjKcg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.d1379acf.0_1588959665809_0.4460788627645025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ETYI3YVkbg/qfCbMEYqdT5hRp3eQbikmV9lvUT2SchRFB/HoV/LyQxOo3muAlCKvyDKCcIGgE4ksoVR9T72hCQ==","shasum":"5353afa33096693f18642d4adadb00c6b54a07f9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.58d51fc0.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBCCRA9TVsSAnZWagAAVCoP/2FNBWy0LWrhlk4DGPxx\ngfVhtOCgAAU7c6SgkcJsQAx5gbSmEAsDPnSzdEbREqoxkdowrwNYZJyh8krv\nggvxuEBjHsFPJK51vHefV5LVpJ6OIa0gdfKRlzyVU2l7Xcu+qOWRVFLj9y4h\nb4/Hfrr2O6/AfAbkiNdkseqVJ+RguCNFLKBBhqSbUy0Pric0kcH1/mF3yZRW\n0DPCZMksNjKyFQ0ioGPF2BROLVousIYEDWvwSJyYNtsQT5Z12BewlyKDt1zX\nOhvw7dMRITB909G0n5Ob8f78xm5rvrL5HmgbGfKmZLNjlhF4DZ94TFA9KgiV\ngO9DdhQQvgg9sQ5VS9f8bBx0S1KXauf5cWhJ1KxMCSx8IHwTl2OfeREmZPqL\n48mxf1Z4bHbkvOBmVZcycFUKgw0prpyAGqujA18fnlcOqjnHihGX3UrBo7cy\nYfpVic/CHc69EHRzjuAg1UmmStspVuZNOjUs43stTLcfIQ2q/B9jPkZYL8hl\n6qiwT+dJeW/uBH5h7Le3ZU0RixMlIU65TdebP1fMo9ERnoOj3svzGIgjLp8q\nEWqEZkIL5+h4OYbdWuW0CanP+1B4ZI9W8lzgwF0MuF0Ttoi8HPyXB2w4kqys\nBjMxwtSSs6ANtiOPumuYadtHUmvNd+IYRok4l8Mh+nWXcth99WBIti7OItVI\n6C9/\r\n=qY7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKT42zFPJrhgCyUTboZwQWWPS5xDNkUoecASydLTu+BAIgJ21hMD81A+Z0AAHy1Ur05yQQ+PjNeWQItVQFB9Yp7mM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.58d51fc0.0_1588965442082_0.7262209629438292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.588062d7.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S7X6EV1BVUOBvhmDwupFWWNUy0sWcbMip90SfyJ4myRm8Foh2PrXtDvMcL0iVml95tsqFyCw5FfNuRfBissdNQ==","shasum":"0fce8af388c821c58d4e8b1cb347f6b9b0a1b400","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.588062d7.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3TCRA9TVsSAnZWagAAqPYP/jIwPdYCb77wE02FBv7O\n8pwMf95twRcRIaYnbre0C/3VIe3WdhukmKW0QqlomUtITo5MuRPAPcHsVRHA\n0g4skznZK/6jjnau+5jl9S/I9dhC1HLPEKwbk78RoPnGJw4uiyeRnvevxsjs\niGWcokC+6upUdGBQv0nFr07vkFuU2Y4u+edktFjUwHT3cJvQuYCy524B87L8\nRImq4YbzH23C4UlDgTnkFayDgfIWCitxpCh7harVyJA6lpr1UJFVni6CV3OC\nXWqWdh/z+wJOzhj33RmnLC2bBuZfWumm10G1CQoRK1BTdP5pRsn7VXHHAepc\nMiObwkIUfMzs0iBn76/kIwQNEFmtsbupbz5epE/459z27aK4muBvKIVt2L+a\nl2NQ+406tXqPzIURVam0rvSF2Sim0ZkwtkTh3i5zYeRyoZ4Y3hz3qfMG5uE3\nB1we0349sc7WObTY8Ciy6Hqs6dYx3i2cnJOXoldWMuZjAP3WMsI4TuotAV0W\nB3wm42nIUGM54AYpDuTdWsYOS8E/XzXxcLQTN5YGl460O1FO8kydXOTwl/Ja\n/hNsY0D7hkB2j+6qx3gyinMvC5976a3lRmklMr8S2xPUFeXOfeoeCYoXsoIp\nprnQ54Lu2wSF5JxzbqrFP0vOezOhh1HcpOz1av3DCbFi0T4L4VsX1o9KNq84\nyUaY\r\n=h+t5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4oggEAZvQ5uaSmHVu4YP52BLu6lV6GjSPXdnRuWt/aAIhAKz7bkqF4DgnvyfC5lnfIaC4RnSwZ0zZboVCZTBXMiLp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.588062d7.0_1588973010761_0.8709793430157116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CvawKSqSp0m94PC8ufm2YbDyvVuaVxzGEFnlzoLy/zJyWxEao10fbx9Bcwp2pD8eVWR7xXdB9s3cHZVlFgIm1Q==","shasum":"b1d871730874152794f02ee2bdac2665d52aee5e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.fa21f639.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuNCRA9TVsSAnZWagAAynIQAKNU3KEu0nflesgndr2t\nj+QEW2i+OnTsNd22RlTrQzeTnuuVa6gDitc0CWMLWTqOTkk8sk5LZcPk7Twd\nfb4N7g5tvk/ctl/EbjKhGSxoJq6JyqinMKjmqGEeoFPqgxEn9sd0mpldQ6+0\nDt0qXMo/rlleoPuDoIpGfvUB/Prd4x08i8QwYrgMZZXUYTmOT0XUZyEwUeRT\nyvc6Q1Ic+rDOLtJu31lf1wChvsp4A42zrCsB0yzFpas9GA4NKn39hKmJRANR\n5HEMpElOxd7AUtqCgeB3xivCERVhMB2x4z/2+4l60KNutcgOfShuY6zn6Mrh\nhJf0np7qALD/dc/N+kg52p9FWs7ti1IGiC9jTUkvrc6oIzkFtzc9HA43/KyK\nPKw9vpwJgSxd6CDffSTlHYGjLcPSQvI1RzTO1KY8l1Yd94/4F5c36Kw3uB15\njLWBoSD0vagDINeBssL6CYN7ZJtZ8g4e4efMDNaDX2Ab6PQXrqbX3X5J/OMb\nphMn6wnQ1xRDU7zItSe6B+phl6R69Q6lDbHrFH7/ub8w+s3X3+O61m5YuMp5\na0ttPKe0r9i35GUuI41BkM6ZtHm2Uw7+xybQYe1JHPGzDIJBRGC1FjFro2/1\n1AmERW+Rw2Nevp1YvwFnwufki9OArmbkSALlI/nvK+alzZP25Ul64R8MIqwQ\nrOtV\r\n=nZdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8B+DG4tAavyRr9m4TrT8fj4WNvUC2cApVj/4PXIy4YAiBXt11vD+5H2fQpeebIjV6FdUeefhxfc9cicW6qZAMa+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":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.fa21f639.0_1589218189005_0.9862890360898848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2772c509.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SHnNGOhT3/4EO36nWH5iWSbpC9tfpx5fpe5dLo2HJryIjZn+vZ33feyg21QrguMj2B+65AxSKySeuqQBQOYivA==","shasum":"40e0980500528e810e27775e9a7530486c7c54c5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.2772c509.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZssCRA9TVsSAnZWagAA/CUP/AooxaA7mdR4woqKck5m\npn9OuioIcup0sCBskbOctGgZT25m6QWGM8SFy+dhti1O19q00XC7YepJmN0L\nekymp3Z0Sys+eVnjieTadDhZTvKntVccu0TfEtRfVikiSbEYtEYG9bmHqKEm\nc+7yrTDJY/HWGBdoXpMkpA1ZJJlYKH2L3sm2bhlh5UsubcdHt3UcHhWAmhPJ\nvzxyOgvLvB7TOZPDTkOJJvXxbeE6UWZ+g+yd85Go88AEjjsI26C3BFKfxNaV\n5qfoQHkqeOxL/OeMY11MMwqePfANT+AIDXtGsXq0Hskc5dtf4t6+t/EhcSq5\nrxFP7w0RKv/U6gIo+SVwL86Hx3Gd+vA7RtHQoOkXVE1kH0eVeRAmkuS80A9/\nxFPFaxdqvLuSDSmu43eD5ZBdiF1V9pfMNcdewyYZWTyIE4mHP3/DMIJM3DpB\npQS1ykL5TzjUKPKiAwfUPVWXUy+33nYp9PjkwlhtnuJs3k2yjTyJ99lb3l3L\nDpJSL7rzMNGwiMLgPx5eFbN0SR7Dnwtzns4PB/j80YtDZAWCvE1nFdJyXj2m\nu6cpgiBmvaZjlUkI4qvxAg7gCON6C1stc1wrVGsN08Gl0IS8ie6YEDovVCLM\nhjMxGV0NIetOGQrJYwJkyVIAOemMwl2/GH+xXoxJghnlcpZBkSWfj12EG5Ca\nC0B/\r\n=36yX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmGupvOP9f2QfhoeX6+9GZX9Xus3+aPWuzDzepA3kl+AiEAjiadJFLAUnwWNRtne7lBSCA7JVqBRxVrG+HD5RJeKxc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.2772c509.0_1589222188236_0.5476330367796316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kYrTmUhTMkU/ZwFmrXx6/3j7LeA5CEtNOlaQH6M2C5fGL8gQRmQn/EuDGXbr6lNl3Z4xt434JYdt5TaGeKWBjQ==","shasum":"c02057df349873eb2a46c453b2efb7ea4f15c535","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.fc4796d5.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/mCRA9TVsSAnZWagAARuEP/3aRlbVFqDdfP7FIrAYK\nNhvd+TvRru1Gfr066w4MtExcDDg+LrazuuESYg2c1zT+lAg7ZukzLcaENhjn\nnvoUjsH61SCtA60CmL9oMmzOq/C7/SduqxCX2jUTftMY6w7JrYP85jCTY5tP\n1IUAyJOO+rBTErgftvgVcNpvh+gD6tfPonLwX1yYw+OjCaJrfn/qLdQ6NlMu\nhQqCEKZzEED4CPwf7hYJSNZI/DjI0TLZJnkSVEt8J9uwhJeleLuBNp/DfgTQ\nAsl8sw255On6+d9Mbz4k3kbU1sZwfXsssJ0djZ1qhmMNUfOF8Sbhx7X6XwBC\nsKvWyM+d8L9Ui4c4s6kwKA3KQ/OkXyF469TFMB+AXjlPSMbbxVoZI91Ab2+w\naKhMenbq6W4Ih/B3mKagsdXlWASkVT/OvQ96sJJnouTSNrxv/qKxLU1LVmd2\nni5F6B2hfv1MkZdSH1vAh+6tz6deCTsWxjsqDWFEo9SfyMseinpIHrIHan+e\nIGFP4qO9Dpb8KaAvyGTZ5WwtAMd3fnw7tTve93H2BuC8D5HBcQM3kEZ8GwWL\naBTgHokhfdMA2MKJmSlg8uENcOeSdIUkE7OuNm4sSUxVrK71/lca76PGRN/w\nw6pL1046w8XnaqUMJUvaUC9N0d4Bw7wgy+Mg7wy9L1k0C0DMnO/Kuabu3NiY\n4tJ4\r\n=H/iF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1YyLVKsTojvYrIIBDChwUs1NbvCKc9Md3NujTT5/a0wIgFbv7pMoEig+kbej2E8RnBiIGnkkUxck+vbJe5oSTrOk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.fc4796d5.0_1589227494537_0.5914300558903132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QhAfq0gdvtnBxBxwcpAvlOB9xU14Ly+l7534C2t3frVJt9GYhy9iQ2Vad8twlNf4DbX/rtidCcYeFml5xbX0gw==","shasum":"95a09f2afdf1493c5ee4f4a6e898cfddfbef1cb5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucFqCRA9TVsSAnZWagAA0PkQAJ18dElFFtvVihH9+7L4\naPeq30cETtTJGvPhKXQP/JGlb8SI1owwNjjeMD3QY2Zo7WvXDou+IAelLGGA\ntSdjZujWa+pTupnBkj06MoY9FnpizMojvqYDLJIHDjYMFp66TDNImMxM5jje\nnikGIBpxdnWmk2335R0g2tIofQgmSFVD83nvQfCA2Hm8nAB9g6tXHQFmPd2S\nP8HWpgoPu3xUgStJJa751Q34xyhC0Cpg0QG3d7SMYdsaaJfARWgb8fBBvDxu\nKVQXqrCX1Fk2CvCtgxZ2t4GFI/AjmJc7ORPei3YXy0+QnHjrw2pIeAiMBF47\nJSuoekolsNDGrREb+R9xEVPPXltrb4E4PYpLvDO2ZP7G3p2GyuLq0PMNBOhi\nz4/hwx412HAYsQyME1dRgv/+MYZhtjQk+/H7j7c8WhiIwUMgjZEMcvr362yk\nUJaVlwMBFRBia1io8N+GJXQ1oSp4bGe4+ycYrryolE0g6Gc+KG3dy8Pnnzq/\nH1S+mXVTdprdC8mNPC62BPo+MSp+0qtkKQY04jlKXdqFWtX5YVhIsUjDxMGA\nFBjRttuYiKLT0kdAnjoeT7YN4DIRlE3XfNHASWBi3j0x3rNlQXPg5tdNOmXW\nm5dh9FNbzfytqTjoTnDADXU5BNSc8G5HX3OTueJFs3SMymtsu5t8fN7eO0dW\neRb3\r\n=1ag0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClTo5Zef4T3+xu5RoJ2Z4uYVuTM9X4xphcSmxh1BoH/wIhAI5JA+q1xbs4GLxCuvDqp3QqU5HUxTSNy3nz2nYOuWma"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.0d1c5f2c.0_1589231978485_0.7950752624248545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xjIOwYu6mRAxEZvbylSgEer76O0bmj3wBbi6bfDpmqskAS0GSF9nR2jolmirE8DTG+l0m/e5x8Gm8D3RvieKyA==","shasum":"d6498fed0d0e560034fb3ee8e1e1a8dfea469081","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.d083d93a.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetACRA9TVsSAnZWagAAyM4P/A+4LtnCVQdqavsRswke\nl1ALft/Kh3hniYFgu8StIZupeQjx4PSfpV8xplAG1pWn6aSQQswuH8hyOufd\nsn65Ay69HxvslAqpW2rRE2D1Hp6GrawH7uZ1+623yYQwBwsAwBbmHTqozV+h\n6s9n+a4isr4EDQWWSJRwsrWECza28z7PvgqPv0Om2Idf5uzEq39AoSqcS82G\nyn6jk7HL/7Ss5b2cQ2E71bRXPpvyStrRXZUQsGmSfhrDCog9ZXDPjA5pJiI5\ncSq4lH7xfAnycX614xO80d3ot1zg4o7+ISiyEHI9AEH6nlAUjmsJAOB7GrgI\nOr9XL3/EQ0PklTlWWvXNiZZOBDZYYm8GNPE0fplPGTr1zt4P7WcG5fmw0raS\nFixrfmpobC2fWiTuTjn+R5dZXcMlrJo2B5T62bD+XH54F5RkWLMFISpI0IEO\nFLrsK4dSZngbtfZ8A0fnEltB/NOzdL0XFFp8Sg/4QLtdmjhccbttqRQpro4e\njZ584KOffOiKhJ2rAaLRfe6J98J6zZUlH4tGcH3zI4BY7sDi30XptX036rYj\nqLwv+23j2MHZd3LzZfEPBjtr5Xm60Y8YLDtBhcE9g9guL0kVHoDp5VMF+EAh\n12JOcGBg2dI903a+e7OeKQb9vpnzBz1h8e0ijWcE+lNRwD/zBVWtqkRo1cg5\nBBnJ\r\n=jDlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC06daWw565CGPcneWBwuxX3iJz/IbwUVtNRUU2ooaksAIhAKoUj7jjoNBAj5LXBqwGoUrye59cZIXM57SN7EWaUG5x"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.d083d93a.0_1589242688370_0.9608512715232695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BTi7DnXNCLgjbmZg2lvOpp8b8mMy2cWA6JKjgiW+G43j0DUYswUPXR8ITI6rFDyTSsXjnXvB84uN+ykUgX5xEg==","shasum":"9f8b935c55b7d6fc254a4e65948e1f1dcaefd8cb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.c95d429c.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxbsCRA9TVsSAnZWagAASzoP/jwiPDwRQu7bpghxzL4r\nyM65G28e1WmiDpEfDTKmsnjeYVUFR8KSQ+28TBtpKlyhQKYXZ2SGeRe9pDI7\nRWx9yneC1eRqNJDD+S4cR/BaCoKPt8LLDm1K/RhCdUPU4UC24h3YrCSHqwxM\n2kfBbxkpvGyws5Nw5zV7mxKUN+NfQI/eo2stHPT7nMRTKmKAdljVP3CrjeFQ\nu+KwB4yRQ0jjFpOIOsiSG6lZni0P03tXlfPN7eDq//0T+qBz85bLH7K9CR4+\nUdJr9GoPgLJfDqzGipJOmPVU28csRAI5a8ezkjxvtxgv3jtQlFmoRg41W7T2\nYcXmh/uEkBKfUm4hyEqaTwMvMXemK7jhdVZvs6kNZPshxku8GWBaJuPRqOEy\nDFSyWVrbZFnXl6i3G0wniFAjjY7gWNPWlPo3J/Q/tkycjhwI+RKoVoPHusTk\nH9Sa3i5mE4YFCbXqKK9/oXIQVvRerFFfqpKpDtUR8WTzxQDPSLXXjBtj62ln\nMLix3DROQIY7YarKqWhD9WGopAhKieKM0JeflRugRM/5oFnNFB2e1uIHjQTL\nZ3+RJT8fi1TnoBL+xO6ov0P6uuYHNWW4T84V005WXVSfyp2p0xUyPawZHe5J\nf3z0eJv2rNI8oN4+NadT0uV5T4yxNzDMwUqwrhk0KZghJPdBdDZ+itUEfIxU\npcEi\r\n=hmSw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5iksKFvK2Zxw4YmCMyJ4L6kJo84Lmnfshh4Vb9FxW0AiEAzb1grDENqzhvn0MeQXyXTuU5QRNBB6S80jdpBz67mcg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.c95d429c.0_1589319403789_0.19409922364064336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-COXf/YjP946Rf7fCYWm5lv90nHNwc+RUYw3F9KcFrorXfIXPnEwUUoYLb9FhK1gGbuw3mTxVhgQrcfJvf5EHXw==","shasum":"dc54722dbcf5d6a69ff21555a1575296a5c8254e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.0c1ad726.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0B6CRA9TVsSAnZWagAAEhwP/ROLi/g5C9/am3+LXsro\nAB4dm0Hvk8y26gOiNWC5LMzUc0VA18ixcxsATi+AAtU5q5w7WxHbRNK4u7oH\n9tiMSofAi+8PrLptBkrG2+kpU6NQEnKufch7pYW5H2mSeDpU5oNc1xmAbyFh\nhvid9rtlfCSGEhK2f1gB5fdqeVa89msj7zPirJWK++dq1nvRnTiXSCDJInSb\n/51ecwPF0AyqEseniNm0ksWeh+yPON22j8KQb4e0IChKiDmNszLle296QyQG\nPOafFPkC1IJw+xb8OSE4ijR2CbSZ3GjemPDbe1ZskXMlKPCP1n2BjwqsbZXb\nil9OC/fM+gGh4mGyFHOgWXs9W4gpl7VCp2xDH5fMvgo6EBzxeL9wpY/HMUsH\nGh+h0Rsv7igEU2iechiFwbCL2kZSBnWsyT6VWL9kU7/CAbAHZ11jQKkEMwYq\nrlxJl4BhC8lx+TBQ83/0d0IAMQopfyVJ5PCp9a9zA9nh15AZnUgSMQgRSzhf\nBUi+0Bc4OtsCL6i6Tm5fqmkcVE+Kq4SmcHA1/7I+i71BdkgoIWDU/lg0IpHD\nZBvgagGt4amUL28+xRR7Pb/GIKayNva/fOjQ6WmtuO+98L1AqbtR4Cr/XBEt\nWCdrNMzMgXaY+CmxTiy5myCOF1VRbP5kpiC17Qf8rhPNK6n7vH3U6zCZVa3n\n+9Oq\r\n=aw3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQFTwYEwf1fn4kqsOphV3GXs4jIdbyxbiybvegtQCOEwIhAMwbXvtXaH7jQuVCVaTLg2heN0RMeRjQ9IlmLh0yh4C/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.0c1ad726.0_1589330041548_0.6587779581444198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9WH8cDngq8DtV1ySX6Km0v0PSS2CaB+uRc83CwYcTy92bMiI7hagmfFsxjtc9PaAvJKAqo8+bwfCugSRJJoB8g==","shasum":"68acd268cef88300f8e93d1e77e145eb6f8a6bd8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.8b6a4700.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwNCRA9TVsSAnZWagAAnQcP/jwqsJLz5Z488ECZaZQ9\nsutob+v4qwhUDIIMv8Dd3GJtcHpLBqtt0jtAU1DKDxBmsL5inRUPSg7x8L4G\ntxpbpeZ/fRzAgIdkP9FGaZNCZdpnQYDz3zY1cxu+DPvQ4Lb+X0PIi4vOtkxS\nI8NQPb0qANXBBcUd8piZMYjh+i1R1JhYF21zpN6CkuMXJgNSjQ1kcnT4EjMt\nAIfbhTO5fHXRz+FYPpv1De7+OCwcmiPPuf68KtTA53dwbCCn4IzB0YmHXVg8\nxf09hQvm92AZVM1j/UoS3wy5EKSzjG/S/eFzLyUtWvc0XRCORiJIrkcO12DH\no+ccDnJ9QJnf1lYcT/2hk7ri+PQWk/uvgggDL/Kq+JdsqlFWmZt3ZRWmfwBv\nJ5UQe/WgK/abepcaj0IBBo0gjc//rBEk8kbQ7jwr3OTrPnqCXTKOV8MQUnjb\nhDVdVP4E9gOGTgwQfQjsgrHTPBy0F/DDfs0eCIq474NCmsDa2b3mCkNFyX4a\nI9ef2SdSE5OISgHjJGzFVE/3mLY8i9AVpHfqAQjmuPQQxM7QLUaG9lLsAe0y\nvvM8JuuRyw1khzXzjU52k22tKKC7SWQgNFT78EK04Glr1Hl4///I2NOZNwu9\nVIRCmlUtSF3QBb1guq0oafnp19F2jzkG8IuVKxM85/RTvi0FSM4llgdPH6gd\nnx8k\r\n=F21t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5/wTTIov4X5UERKXDJBN/UPKzqs0awX3aoSB5Y3YjeAIhANIC5n7AKMLxF7VmNFBeIhG0J5xdzyhymlaR98hJNie1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.8b6a4700.0_1589390349072_0.7882038060032341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3270effb.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Hu8YdDNaps2c0UgZLpW+wu/vCzOzSN0AscytwHCsmTkSBeCM+MZKtacap+yU7v+n1sR2aTXyPwXnYZFWkHtpFA==","shasum":"4a85097b151243941fc235690185ee1ab5c289a7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.3270effb.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWKCRA9TVsSAnZWagAAz9QQAJJ6qHCL4vQa/gL0X0SU\nIpzc0jCJA1DoaDXl4cHV5MdUqRusydHBuVajdUSHeH3F9hbUYLP1y19Cy/w7\nSnHK6uFyXpu3EtCh6YHwaxQKV1qFw38o5PIlNaS13ZYMjT2MWVaz9tbk6mlJ\n9Y1ouWP3i37eXcTaC+TPYKZA05AfxzXw6OXY8nglsyAgYeibxK8Ms2gvCx16\njBu9ZFf53wyGOV4ID9m9qL/P9S/+TyjmRqw0KnweyaBwOGA0Iz/XP312Nt6a\njQzSfgHLuF8DuKb+pWTBikFKHhIUeOaoTetVoD08TlFFefdvhdJ/P5TLN9hO\nOTc3SEG7R8HyoDe8xgrLhR2uexfsTk/nxoSUaPAIEhPjv6pSwKp5EHaNb29t\nQYw/RS43x8aNrGaxJVO5XMDyw+L5FWrOKGZZC8uiO34tv24NVNw1heYZkD40\nQzLvA3htePGDIcZ4n9xs9V5q6VR+vqcRVlZDxoTaGfHpSESB1WG525vc0km7\n6JVkAuqm6OsETK8gI2N01JK0uHlRkY0evvGWpoL8y/pBj6Gokb3I7GMDcP+e\n8MenDiTuDFpEbH3QFdYuWvH+JSMNAAmVFIdLN7wOPPZl67yQSgvwuQ1HW7a6\nzCinywZi6/7EtnGS/nZc+vd54kyA7bA/DsDKcM3lN5OE7z2FK8D81jSn+Aga\nFClH\r\n=YEbv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3kL0YLMgh3WTOUu0WECNh53frBATNnPaPoL5KKrfjiAiBkwXEwVCcx9TGCgtpPZPUXGtewDyTPcgHUIk0l6x2IQw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.3270effb.0_1589405065906_0.7867528763352463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1VGO0O3exq/VOH0yC1UFeg0UoMpoQFcLRhaFYtukSahrTF8/prmFL1KtjpwKk2Q0QEd/A4xHOR2xscc+JOjHNw==","shasum":"07881a43e7a4d84c1ad1dde8cf15f2502824f1aa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.832e64f7.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJYwCRA9TVsSAnZWagAAfVQQAJEctPEKTudTe63ig7V7\nL57ptpebG7R1qjbnTYizYplLxwIVhxFhYbAyDJF7J5N3E93lW6Mpy52QVtqL\nQFzpJmXTFgnV44Vq0k8B5fBNeUOvWGFB4/3w6/3TiNAKg0pjyKo53+uBcAjP\nIpLcgvoZlBCkncT0k2LK8UTIhISUJ8ezQLgYIvOcJqNzEG7BK6llx5FTBDeX\nNbdS6z8x4RYngBOWXSlXfNt/OEIKyLt5oEGY39cN3LyQfL3kogF3GhZWg9/C\nANRYi1i8xzXeE8BwKK7zY3daBXPa7BodNHx7+TV7c6bicnFltyjBf0HdwBlY\nxEfGxX2C0sIp7TRsS3B/4Fn3pzGpJomz88sW+zSfxqeIV9DNuXjGWmgMKJsT\nORP2ntbUSNiNlUgV6dczJbdYci37Lr9dwRt6kBapT/8NI1+GzBkUYdE9TvcM\n+1xWP/edAJxzkhSliQahhirsr2zaUPwupxhBllmdvCgNmQskbZ6sTZKTSN71\nzP8Rvk0ELfrXVvXeeAjnA9UVIptRgmbhAki6mdEMlKBqedPGk5zIpyXWM23L\npvnBTLy9+I/BX+ae0DZvr30AvsSS3jYOK4N1PiJv61C5K2BCeJg+U8RMhno5\nVCdYfN3O6/TB1Tt2cmst/szdgnOsmCwyb05MasWblgMDLq0NYzV/UHXZxvVC\nGR65\r\n=4BkO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsyZdI5x2SqHZDhNuRDzil3R5BkBXWZenTO+SzxPlX9AiEAxCJ9URH0Up6SXYcxmYcxOwrb+ahY1XXeSHZcn/8DKY4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.832e64f7.0_1589417520439_0.26015506281875944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-n+eWtj7rvHvb7Z6hxZGD0mDST7SR2qtJd1ejSg6EQZdE4R0O7CeWnYK6lkt9eoNsleiE9S1bqoFmn1Y+Rx7pSg==","shasum":"507928df77e9637cf6e2be3ec1f1cfe96e7e6c06","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.472fc4fc.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLysCRA9TVsSAnZWagAAZpgP/1QUKoAgztGwxJ4xxlNV\nXdueA3GinWTAH6P3AaFZjs6g5xHaOjjNZ3N3O535LyrZsC7BN7HU88TfZ3G4\ni6e/d3ZIr+15WlksHf3CGRNiVVzQeu7ze51palvDFm/ICwp32Gs1LhXeRUQH\n5iTX6DHQg8o5CqUOfms4O5uRmpujTC0vsBDrJRtpvGFLksU1WRFfqMSu89zS\n6e7hw+GhP3DHvzjf3FXUTErJnl+hGiU6nCCdZ2v4Y60vyaihNq+IbZ7NBhiF\ngQTjSneY4jCpaAzmFCGx1rJYM9yuMfT/XCt0+DQK/MjdPwtoCe5RlT8fLYG0\nnKlyGuaVNLkfphp4GCL1Di/ZfdSxv3ZW3Y9sRFdnkAcakRiYOLny1zfD32rp\nYPjYRqRQMI4xpGmJS9MfHCtuuwvXyeQOLn5bZxxvsaccD9bcJHB2fZSGr6tn\nwRo7vIXtW0J9hNiHmCBXkuVmbPqDWbw/uahCH6nTdznuDWgIPhR+JlGjbxAg\nLUW2CqHxQiDB43D/jK9CqyZjvnNohruvjZ3ALye6DF1uSWtCy1+xAX25+kzA\ncbq6JZntt44IOoQIztWYfv7zKxD54a0SuUBF58NFobR/GgFGoyaBQ3EUCOvG\nYV5ulbXQMSRMOWk8xMO2XIPYTGYXoF6SYawT5ToPPn0YAeFMPknzb5xTNGNS\nQ7hy\r\n=hzyE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD94OpzxIYkSdSrayzs2RX2Z4+nYrVD4o7FEUa5IY/2owIgEr6V+7E7tclqNSbPU7SJ5JcceXW9p7KNJdEosJ5RSlE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.472fc4fc.0_1589427371749_0.4030443255104359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VdoHUfehng7Z7vKfjBzYFb8m3DxPK5hh0xt86LfiV0gfEStnwEeM4pf/l0BvEvalU+66UrtXyzs81zoAcEf/3A==","shasum":"6a0fe7517ebd800850fbd5650b5afda00cb3ca9b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXC8CRA9TVsSAnZWagAAaMYP/1pvWcqQoeSSmzaqmRAa\n3txR/G8lu/CD51C8EP6tUatPvOAMZBP4r8aCGwvXkpjpllieNwVU+8piqn1Z\nTyGXDeGcfm2sSGDgiTovX8wRapZJXq2wDCVXFLw2zvagAHp510PVgD6hvP80\nkxG1JuQ8vpjaok5sG+ZzYhZJUa9ShXXV+jhuVVOQnFye5MXnhQvzP/0+4YSt\nZW1B0wInS4D3nCU11BNCdbuwSiX52caMx+WbDLwuE68cUT8FbT+Pm9c1Xd6S\nRPHSWIclN4lQGaLIYSCXji6f7s06uMU8JAwfc/nCSEjxYjUthmGMDGgFNUkg\nyW0M/5btbXGYaS+217bH0aQasMjMWBXoDczoh89aVXQM7vsYj29zp1olSidp\n+BmtLjt7uD5TiHIjox9qBSY3jkW4c1S9bdZOaEa3V3lCEo0dHTY+P69cGahj\nZpiM3SJSke2VmEgI5WeEaW+FANep6fkvekLu9ar2y8Ue3GBHEq5AJTAltcWx\nHSn57MSGs/Rr6gd3XZpkngG85ZGN/exzcUcXwB7MKLftnBP8MIKlYjBiMIuW\nBaPonEwD+1TR3QBrKTTiWFp1j07Jfqtpf8yTh7RAiIniXkavvBA4UdNk9zvx\nGHUKcNXWwspO5VDRbi650Ke+WpIqPUAwGcRXJgSDp0/h4xNNeiIDHbcc2zgm\ni6FH\r\n=rrgy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICP2pW3GDd8CIxdBlTQsrUo6x+7pJuayNTxI4FYykPynAiBei9nMWCOpuAZFyokVU241Hj6ILzAfG368p+tszY8GUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.4dcd7dd5.0_1589473468323_0.43625904552020023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xQeKmoGDqSruf7uWBtVdAAoEYVeAOxIw/tShSPJJy9/igO22LTRvbE97eWV1C7njK6Gln1a9Qn3eWTjuTTNA0w==","shasum":"6a0d0f90264f7a9e2bfd8e442d17077fe2e003df","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.bcd3400d.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyECRA9TVsSAnZWagAA26AQAI3FsCnct0HYdkexhEWn\nJIrczGqHO0h42UX/ZEq8PjowH1B1EZksz4g5hwN+86gtXgZxm9Vly4GnwU8/\n9+KtiSfyz70dUGIiNM0kVvR00JS/hF2sZejKCt8F60obOVOKNNSxNRiaEo4E\nCjDd8gtgwNapGWflcC+yT2Bo5p33JBHtIPBx3jTV9qB4OsLr78aHZ/6CYuj8\nD8a4iJXLJBD32t1M6BJd0brY6LSrP6YTIV+RUGNNEES0+Ic2t539Trsb8lx4\nVBOPicgWaFHhCLSDSp3SrEsAaXMM3jzehf+JCKTu486teyAn3Lu3t2YfqpQe\n7M8qMXnr9k3cemyFJbdYAmW1Unz+VSuzhcDyB8c3Hu9Tcpf17CQ+a5KScWNI\nahvyYRaxcMrz3sA+uhC1LxNSfGECNZqLvVokOcOn6ocUxhttuAoh1CkFnSQg\n8vlG1ZfbajY4+CYIbc4q9k5LTj7FcJzwFX8DrI4N2J+bRz0ZDF5cmHvTk8Ku\niPQ+xQ8iDTzshOmUPkMErJmMESOuIKGXpkLbFwqvNuriiORbl1+uU6SYpjgm\n63xylZ4DfELz+CRCTOlhBbORezE7FdQfQo1lmlYJ6IFyxVpWTprhZ08FX+OJ\n9Kl3sBXEGD8q9AVah4ID+8/NkAQox18sXf6UJFn4Y4hrY9IH/cxxS44Z+/R9\n238O\r\n=Ss1I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtwaP1umXwNMw/io1w4yDQ0CqkpXG3U8+vFlNDLPhKaAIgS9NvJZrZKssHCZyjCRwWqUH+jhWtWgI7tlTW8x23QZ4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.bcd3400d.0_1589582979917_0.9660704364915975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.91f63179.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fHYL6eE2vqdshSHEj/VgT6ABaBFV0cW3ZfDu4v2sDziL6u8xra0pih7tvFjNtb9jxcGygLwa62EwZwaPjEJvyQ==","shasum":"b3593067ab96bd93ccf401909cb4434080b7e9ce","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.91f63179.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUOCRA9TVsSAnZWagAAxm8P/jgg0dJhi6/zzrb549t5\nnNvkIV11HHBm9AYP8zFwAd2ISjZZgyiM59DPVH231m7RNN+oUh8Oq5PJJuZN\nB9xJ6h7Rz7hZX+6S+00MfOblfS0zZYFjLEFP0Jzi+FSnCTMqWeIpSA7Y6MhD\nXsgcC0k76BNH3oXvQIBk0OCITzJX/n7gjYnjDK8n+cDsny0Z+dIZRFOc7IUY\n336LHUzMhOmmCLKqLoUchEiJFAMN2x0y6knRujKKkvTbUUjw2t0pk5sJlP02\nIxQfhoRJaaCBai32aYaMMa7wy1/1bXoWjJHzZK+6eZsjJyeHhKiXWuxTyjEa\n7o1Yu8EwaUnaBQr+jS/HfLSHF/5kNlL4s2MGEIE6UOWFH4W/NKqypXNSxD1I\ndj7QvDhJore5T3+lssSiI/KH13A5SwI8dgUlT5tBQXp28Nvg0Y1dTDsPvaVN\nApqvmoJjgH8YJTu/FuWOK6U/rOEbT/wwtpT+W3Omz/g5jS5ZX2oadK1rBmNF\nQO7siIPZXnlQ6YWzfrEfO+TBbx4GSz6uzeAlZOjaJ4DEN370sffZLHhtsiE5\nOCKVQAyDVKPkXlatZJlTcskTfea3iUM5tt+SQti1uvDbQwTsCs0CZHuABQQ3\nOvxl50jdlXZHbYJyNerM/CHhQgo6vAe7QjIxTL4cvc1xL7mDoZ8EkeATbZq2\nyfVd\r\n=Z/fw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZATPZ/4+328RJYZyClr52tViQtmGEosVozQqTqohHiAiEAjoRqV6d5pEw9Lj1aXQ2PviPvDP9G0c50dP8iMkZ+o2c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.91f63179.0_1589589261564_0.33804020292193004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dOUmlBJ/Av9rJpCAIu8hlEpV8mKyQNutYZHGsip87WD/udate18QhujASUPbQN0m2zxn3gLbFNQUwl8xOX0IEQ==","shasum":"449244e0ceae2563bc51ca1b244d74d870eecc94","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.b8aafb56.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtR9CRA9TVsSAnZWagAA/uoP/0b55Ei09CXnpvGmaegt\nMpl/spgNXwL5HzC7gFPUE4BYATa77pY314Oj/C1xAfCNuJUDV9nHB2vNBLQq\n9jm1ATO2rM+HvxRqLUAOxzT4MoNcXEA03sXdGGI7wO8tKCahDhd+tOnkTxt0\n2Zo04sWceNFXnxGK7LjTqXz9VjipyM+KApR2tVCBxCcuFpB9GsAfEYIoIg37\nMKjc95GXWXT4TNcv6aFO5oYIMZo3ymrJSy0yAE3y6/SH9/zaODl9N7znoS+S\nTstswkl3eKKqGE7f2FzSM+G70V3nG5HkAiWrwkuXeQmqUTlTTDAejgHXZ9GZ\n/SEuDg1xjjd8uGYIG+lxVoBeAtLBNlTkajftwPFeGYmkgWJoqkZiK44eiQpA\nfml3qbGFju6hQIw2Xer392TWaWQaoEwMkOuCC0E8PAHYDiPWGT4VTNxv0fAr\nzS6w4d5EbQVRhBrJ8x4/liIZXytW038a1aiKVKUwjL2/A1Z8rFjMfWZcDeE5\nIg2Z1hp9LWQnRX2uwW8p1qZGuE2ysqbCMb8Tpaqk2v7cVJfeNou54KWaFEyU\ngc4qd3GfJ+lSQnxxvusZdeno/nPRgOcaszAbE1Pwdg5HExtlDGBHeBxGmJmj\nGxJSX216mzL/s4ELSFsigTcjsXtUuVUcn5dXwMJ7+TSCfZQuz6PsMdOJfYB8\nw4Qk\r\n=39+5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3zdWM7X6KuCdGb4dCYc9CyuX3eaVZb2U+Z6TD15p9bAiEAzZ+BqG0J0MUKGhA4F23vjp8md/Y1U7OAuWTq4Wv0JnQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.b8aafb56.0_1589826685518_0.8280205417146826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a564b194.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dnmUQwHW1BhpD1pbkg94wK12lHQvqNKodQcf95OJd6iHgdbufa1077kzjDRkvcua9UF6qYN/DPAiSS/4ItBbXA==","shasum":"a2f8e7caed2dcbf93d2844b02c83c04c9e5e2a9c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.a564b194.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxQ6CRA9TVsSAnZWagAAH30QAIzCpwKcTFZeQGY36FL0\nEnfAqzQKXT8ROts72G4kB3b0l4VUHDd8BkjjBCEGRby6rFaSqcBU44HAY0PK\nGSiRYc2JYI7C+1eDXpy1jHKpYuE2ws7eTaXSOC3INOAQFFch19XjvEdisv2n\nvGGDuRUtR8qhBjrMJqIH8cyDBzT6acNa//alfxyHPF9vcKcziiLPx1D7sD5P\nuPKajGUr85r/lVJiD6WZeJAyHujA6+gLiOzx9ruwyOiyEhEUERVSxcQuEiE1\nHkquQEm0lPwoL+DoakCvVmJTcPOuJaFtjkRlZ+03qlRtI2qSeUu2T7z+vA2Q\nT2fwNSNPRl5P3mcMlN1mOyIE4p9hJ8FiOCr9U32trAxogx4zJv7khEYE8XFO\n5YHxbLaeAqut1u18Ym60FKed/QdqGMcLhXCtL8MptLYJCvMja4F0eXFeGJTa\nl7G5UeqUpA43p0BuFkMhlgl5uveQwZUvxepJ8+jA4qkrhtTA93GOgjtpgxm/\nv6JhTZ/6xkBKXqs0QU/wavUejTqtuBMtj6Q2fuWhu46E8V+9kdUqZQdpVv0R\nMRjElYipqRXPU7RCYENUvMaIh/XlwMUesncjtXb+qdSgozShjYZ0xbcbp0Kf\n7KT6uG4y2WWUxHvvtnZMQVHVlRc81PJ4gwUaeLr+7XSGJUWrfhIJNx40Qobg\nV4H8\r\n=Zqvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl03cEVnASqWxXL7CRETTfiBOCCl0ArMIHS2D0vVaGpwIgFnYDNmuaVvYJnamuNJPRLqEwnXWDWM+unZIVoC6S0AU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.a564b194.0_1589843002029_0.18496410757232074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Wv6O+TEu3REOcLzFL+xbsmbi96cyN6WGQA3O0xcghGXQ3SBIaMzYTalNzkU8DADxUQZt1HcIvWO7elFENsFWLQ==","shasum":"f98c419fe5229fe14301751435ba043db74245fb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.ef56465b.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bdCRA9TVsSAnZWagAA1P0P/Ag3fdNimPTbOraMy04q\nJV+qNzANMkuf6ciJ6k9KLowGOtjLWRclLMXjV4FKIFEWEA/5LkVWObOdYcgP\nGmRy8ax6qraKTKJ0rDdWEuBzeYLgX5F33f3fpWA3mwy3J3ZTa/IWIKt3psUw\n4GXQWxpKvzRBKbI10epdyBJZM60hh9vWpvHDjPIfg9nDXTyWDrDX+xIc9zQb\ncnhAVgypUxIbyZiM9gMj5Rt4JofXjvBogKorZma4WzwR6sPc95tbmfpSvEoj\nl+kLM3TukzFw8SIzD9xFt348yxo4OSQhg/JU+1mLZJDUsMcjrGYZJYUxfBHO\nPsV5VANX+kIfSdU25w3bvsv9Y/2jcybGmHs8hhHqwZGUqoyUA/UHLetyw5nK\nNJ8umuog+4bH5q31u7oM50vRY/e8c7hg4vIAk0xxmCq7aTp+IJayxyMCIKOq\nPRGQlVRx0Le4O7cSBDtWSBB+4XB/YCgOT1rXKP/XnUNJhTBwr0Qp4vCn7NJi\nd3mluKVidIuWpp9Pn8gGhG9Wh+ul92UJ+Hq4+xUXbL5Vqqxf9OCJKRe41GEG\nV1V90ejsxxGGxa20ZB90eeQr8AWN/VIeW6PX/pMoSsPRq+8l+ruNryoNvHCz\neweevDTjF5OHAiiqBhKxeeBvaTsauir2jD0UVEwg9GmJvqKTiw9TyBOYeLLk\nPhBJ\r\n=+6Ie\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpvNHk41Z3IuyVwb1epplNKQUnjVD0mgzpy6eJOPIk6AIgAOlbaaozA5HizQsFVd4L229wrs0HGZnUHD1TdYDnzVQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.ef56465b.0_1589860060737_0.9033167045375063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UoeYH0SRAGl9ymUpVvkUvUgsZfnSPvcgEgZG56VRvwm6f0JsmifLrQWIk1OAAlVRr28AEOFJ/1nwj1+Y1P3osg==","shasum":"78ba693d0f288edfa56ab19d750cab7b23d12bac","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.c22dcd71.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBY3CRA9TVsSAnZWagAAWc0QAIC5VnqUIVaLqEyULHuf\nwLvZbosebGovLImfpsC+eA46ETJRHmSvELuDGfGi/KIxSLqNHc5pfls+MJbZ\nBTD828HmIuljcU2q0QyP/tiamj8AP/9rb4QGnXP8EAQHghpXL6C/fgXtKlp8\nSPoWKlYiqBrFW+54AkSShR6TeymbnjSPhVY6KDTvpN1n6XKCpza3ImCn3HpS\nKfazJirFOGsX5kSY4go+KqWOh797T5rQTWtEUaucEaqtCc+eY2LAjlGAxtba\nslV48Lp6BFRNgffVU1F4V73T+Zz0PiDPG/XrsbIAz06XUf/JccL9g1IhLCfO\nmavNNSr/MPrSYij/+pu/0M/s1sY2XdVZbsqj53ev+GISJ5AtwPy83Y9lZm9L\nnIQ0Pqa7ybSA8aqR8c7gSNp+i7TXn2/Hq2/4FRdKC9Qy2wmqf1WBBsKJbDEx\nMRY4bW1cufnihepl9efg1IPjwF4LhcICGE1DqdFSiCF16HFrQZeXElQuQ4/2\nmIoOx4aX0UQr5rKXIiAvnfF29Ft2OHvHZiXBw+nbC3BUowOw1uSBv71N2Dt8\nOyVf5NHwf7XyHNjjWYciA+Zw3N0ofUz21YvOxZRl43JPta4FGs+hgI0OVHgv\nvIoYkZgggE+7AklFNlMCn0lpGjfwn6ruW2IxxwnB8S055Qwwi0Ognr4Zgf8D\n2FwN\r\n=CL61\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICU6a/EsCVGIkflKowDgf9+Z2GfpFMOmayBuc1zwtI+6AiAphEoafA5VClTVN9siOK09eGvALfPHXPAT/1EqoJlZww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.c22dcd71.0_1589909046913_0.4421415392514261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0gyUtCQFxAckgd7r5fsmvxlGbReN8xwIK9stnEZGoxjwJDUJwbqyNxn4ORHLAZgvGo1ZH6whfCjEA1DCies5vA==","shasum":"e68c7ae8970127cf21c7e5aa5ae6c3e59aeda139","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.6eb62388.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEO2CRA9TVsSAnZWagAAGc4P/2G2LFe8pUjl9JXwaWel\ne/T+Rs9XQfqaQmjo1PX14YCyHssQlRQi99oNcABOtAIQEWsGd0p2FH5+RLpM\nrxL5cBQ4mBjIa4Hikqqff2wNvJvKAWLO6eOLr70p4ATTu5LM26HFh3i//3kE\nm/kZFQnYJXMKU9qPciTKorP/AWsP9QDgzfOH2J92WijRXbbFyrxXufzz4DG+\n6WadSJxhaJGswihkszRpA443VVgON/7vJj9mN0M9glgLrt5BfktIHIlxXMKp\nican491xh7doo4XNls16OCdpCSoP4i0gWVowEGaI+R2zE5wXDDGPMmo9+CMS\nKSumvVI1lQTjNA9do8dOk92LBxchQppuY2RW71QSMAZ8/ww2scaQ35Naapor\nT6Bv20yet3OSsMv+tS9QgJcGDB9iWROX5s5arrQN/RkGIEvhaslSJu5MNwM0\nELunOyq2nIZnyxM88dKFNziL52mZt9sJfuZCid5xw+W+TzLdyr4aAdTTPOC6\ns8fTnESBY/C3vB5/kGz62iQPZqkwQciTDIxLlT0jvpCQmOCf3v50HovvxAkh\nb2Ql0jUhrDAInLcJMYvLwEuKnBm0E/0VkAQYLKrI/o7G6HAEwV5uwNe/rqDr\nSzi/0UYYEfmfKbGJh79C6Z1VfbNk7zDr7rwfP1bMo0jOo8iqmLCcE4qRN4+j\njrAJ\r\n=reuz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFetHlRxsB+A1B2TVoQZmMJNzxLgHNrhqrTTvwQkx+I8AiAleYWiptCr/VoWCRYGN69By1GYp7XawtNLtIqzUZCYLg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.6eb62388.0_1589920693591_0.7347143184223228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0q9DfbGuxBsO8Z6bEeM0S8HNNNNg81RqRyGix2Y3F7sS8DEgHNXRaf1pR6MOb6w/eKRpkTRbOJIItJsyYfWjsQ==","shasum":"0b74d1de546bbb06e2c24c775836e4645e6a38a3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.9bc3230c.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHPCRA9TVsSAnZWagAAR5AP/3iZ9j3D9f6uzYGFE/bc\nFJ3ylpZ0AGq9pHUw/o5bnAIm+l3eAKDz08BKlgXbYrO3kdp97jmf1e9XYSPQ\n95Tu43a4M/yaNkt2dlTbr1ckP/ehSC4iJ+Kibl1NglNX6hGwWeiTcqVfnmJ0\nHPIXEb8aXcG2xoesofzQvoAhvCSkO8E3gG90olHS6dv2vCplvJ8OAluQ+zuB\ngp+ueu3CiuCFAxTL5NJh69MjbewtjSOQoXL1nENkxWm6XT7iKiAfiDMPImS+\n79rf2UOKOjov8/g+oj0LjfsGcUuGsAFECMcnP4QY6fxMaNeXrk4gC6LkJuEL\nhXyOa9ONJzNkqLezoT/DEWxoKARJYm1uvkRTob+SwVoNEexgj0EIqQblkRu9\nWnQ+//72sTcSTkJhdbF4AvVK3WzuhN5lSwjvj091PglhirDYEpFEPlOXugRV\nrD2NIdifvU3C5WP9tc62+K/x+WKO1YZMystStCanr5S9Di0DH0g4oi/i7m4h\n/BeAH/cELBzkp4ayqEYjcBFOq//35DLwwkd3S/rZ658masSaPjDLT1gF0ecs\nOaoa82eI46Ly1F5P5W1v8TCGVSltcQapaW7GrRKUQ3iXFA9ZfSw4Pviyruc1\nyijUePGPxNacGNDaE/OJzoNlcJrf4WopgRGlxg2nDSLLb4OSoyKnPbSbUgs5\ns0Uf\r\n=mwBv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJ1YW71gXw5xg6J1Jd1DRgukGMPp0Ifjdt5gjvIgUwLAiB2dvSg9PJQIi69U+TJgc6w90S/dARnAVX0GtHzNmyMCg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.9bc3230c.0_1589924302923_0.45339501611598343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.421a6856.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pJ/ujSQMMq+tfoM35/JX1+KwCYUkv5CaPFOgxhWMT6Dd2x3FhwMv5wUU6Eb2XYH+z7ia+0Nl8H7xYkTpQgWzoQ==","shasum":"5b0725e75598a3026b1bc26d7f61418a0d03642a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.421a6856.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL7yCRA9TVsSAnZWagAAJ7QQAIKeCH8u5bMPMoDbdc92\n5xP1o0VSr5qeEYtBiHSpWCmq6FrnIsZzIMcLYigLG4PUrL/2ujHzc1pOjj1d\nEA1VH0uWofKRNzpPr+qfAtR91ZAE5GvFXt1oezra8pZ+9xT0YJYUooChxs6x\nShyQbLMSLSszoVQNjRpvvKZYThb67shOzqfgx1dQPqss2Nu47hzD4OSDJML6\nAyNlE/d+nS/QQiIVuPoW5jKqj6fT94isOZZwft1j+OosM4k0Yy4XpTSb127H\ni9A8p/3LiaGrtROzp5o3Gzp7y8UWGS74pipSB8U0aL7RwFROSS7vQ3eC/IzN\n78FpIi/yhb9qz9zTa+1gpO3aM/2F25Je9c+fmhF0x6NUZc2m1MkxF1YpYZNS\nwBpUODggVebeceUJL27Tfl1kV+ANHIZuIokdt9TCvgsHYvVYFx9hWfxqSkoF\nMfQ/QUcfO+VAsUZe0WuIG3ACHOyo8+5rBPRpJc28RRPzuKqeQbQAWSePTFhe\nXmPX6IysUTGb+H3q0hogJF6aTK57tI6XY6qDz4f18YtKjXSkoKLqUL59w0O8\ngUt9cf0vm+ihnEb8IvP3HIGs6i7EQl89mnXQouC68e/vhF/qd9VkEUq50UZ4\nETDCZuGltTQOIxdOOfNXC8IJeLL4QIzTPZK/A/W14Bp76VNurvidmXzZwpCu\n9bag\r\n=wHPH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPAfZx5Zde0SbAlieJUrFP44vhqu3pAw6meZ1aldN1kAiEA51EdFSkcHe1G+AzqoyQ5VXj1/hhCLU6QkWFTwrPZNdY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.421a6856.0_1589952242535_0.8980576118644845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CtVxIppB98qG+/0HmzqVNJGymfFCkxyyjM8rIjdMGGrYJ7327AeT0TPmgOEQKCOGvYQ0tCsM/2cWvd/hQRkufA==","shasum":"3ee37070a43e295a7805538d5497e692f833a396","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.761aa6f2.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaF8CRA9TVsSAnZWagAAC0gP/RGBO2djgyLAytuUkPiw\n3lEucAmZhOOMbb2Yblgj1GUKMoMPAwkPxOB/5Q4ixq0PeJYgQLdUhVKnz+Q1\nR6P1DZdYOnji+HyaQwxqi3gYRXtzAqFJqBeciuR1gmlIflsiGGlMf23CT4cL\navzH5mTM0oGMzH1kGcrAYxQicdNYhh2QAQ5eq3t2iXoVOeUhSoU4avL3k7cM\ntVFsIoYfgUVTgaS+GsYcUBH9/2FuSKnABEIRanqFsN3x4KPSu2rVRugdUXNf\nD9qq1GLDT1VkXaxKKBH1KLeXOOS/EqTNlM9GNio03Bt3rtfaMA32J50A1F+z\nwXfXfAiolnunQekC0rN2HrIDu/xi+Ld85owPye+b0PhF6tsb/sGNcvfHIl/2\nZnT/OWKg6I97jWaqYH6ZZBAU3FOVFSqoqBAh9gi/AkDKJYDTvUbImXDoBwCC\nAN9F6MFvwbh2lLLBrM1w6tDhJNjCMxRopr9BOoe3krLTSGaXsYbPthgwnqyw\nzIlhLINA21seF3EhG3EWs1ZS7Tk5d0+glNrPaJg2q/VOO9+LxlG0+bld6VYF\n3ICAWvX5HArTqKXMZ1uNbRoYLURIjfWpV9LLReg+FuhTQyzmRlk6P0T8o1/n\nQ/cHw+I7NbeL8WVDV08aqYm1Uw4Q+LejlLvQsu7ZSPYS9mlCLGXqAFVnulig\n/ErX\r\n=kBwO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBktBBHbw0dO711WAC9aeikTzbclFjeGSgaWcffOe589AiEA7tQhVpUZAmUMhOrzv3TwwDg7ePfN+BH88dtW+/QW0mM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.761aa6f2.0_1590010236261_0.8653371058947734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wCMjejKQuHcXTusphXL7N77moY5Q0Qnr0WuMELwvchfrqIx6Z+7XNgx0k5FmeX84C4YBkzUHGrHUzqh7hJylDg==","shasum":"54c41e5ecabeaead0708a6c7ca12543a4eb4a82c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.f8654c40.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaO9CRA9TVsSAnZWagAA6WoP/30TqLx+4Sd1RNTLRmf8\nuj/6p0qFQ1PHX4rVHH9o4CKsb/BR65sZQ+KPY7LmzAji06sL0QEY8XOyKNHT\n+3GUvRupTpgz8N8IpGjCbLEaQlEyaz0/5i4kVM+qvVpjuS//NH4q69QzyE2k\n3aHhv3avNPt9jovz9Bh+NkPv+u+EcVCUuJqa0Xj1v/GB3+ls+b6lqanohxrc\n5Syzb8vZAlkbv7iI+tISXpTTnp2W8RUwEqNtxXxCUWTgA9KNs3RPRRce7ZCn\nydKBwI9LgB02Iwhx2d0IhVOWksY+OB2wZTmA9BaFMwpW1DfxHu0NgWsy+VmR\nbnqU59q6L/ZBwPluw1wiDwo+ZGmPU9CGT49WHS+Qio4NZIx5xqd4xQipdomv\nT7nXI+OccpNBehwdj118kB3wWLphG5KzRllOOHfdMBQZBQ4/S/UTRrYSX3Sq\nw+ODWUMT6Ip2QfgKyAy2UtO7rtj609u/wqfo1GfoPQOQkJKCuv1AbDvkxbsn\neAjfDhpWRo2/h8FUXSyq0zCa5wnN0kgvD0Hc7bI6AJpI6PBtE8Cah2XfZjNY\ndngnGke+TVrOTpcucdtuBZnu99rGIkyUcjmuf9SSeuScXgGoBmC2qSHCFmxv\ny4jUIDJHzfs1ZCT0rRlNL4LApEOkyupt1AtsWJUnTfj8bv2uQm+wa9YNRh9E\nlFXy\r\n=Ac8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpC5GsYDw5lnvVI+Hp83gtFp2+RrQkiUa/oS0rn5YVWAiEAjtDEQ1FvRhxjaOw+DdauKUSoRQERass7ZMTLL0pjiAY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.f8654c40.0_1590010813038_0.7652192940896116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yegKlrTms33DYcFYhflOxC1mst83VkyZ9Ysd5Oh8eFvV2SdyzeUgsNloYnuq/n1mrg//K4XB1YmhcuGTi1uJkg==","shasum":"d6d7fa0922af12577efeac47238582d5afdc1a16","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.05f3853e.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtTCRA9TVsSAnZWagAAS3UP/1iIepDHfD6gd1d44aZV\nH84dGPxGP0WpbzDjDlckOw+dJtcLvueRR6HA2LAVJ1q7FdMZCyYX23fVZIWQ\nCdtqwF+TDcy4CkwyvWUQmNVmMVyg4ZRwNlsXKJUNNUIikAg4LoojV6WoGWuB\nwGjH6RUVWdLWDtGiUPOM5AXxcpg3VLf+UgwUScFJ6fw2mDJTEQIRojbVqNpZ\nDVEPVHkQxYYhzW1eqbEZZBJEroLZG6XaPE3YQvXoy12Jx2ZePtS0ApeLcBUM\n818GiKzqHPA+CJaFZxs+Qh9jW+dz7cfce448PGexlmM8ovSyq/hNGTFOH8BG\nLdwXgB0BbqDBznhGvUE6Gel64d35ZYqYzSdmNk7r5daRCWNtoz9edlB9EORJ\na66x2wrM/Xu5SuqUjkjapQgR2FBuONQICMP8HmPYZokHpWfelVUhbWcxBc1n\nvn69foLHrxz66b8Cei6cZmKPrBKoOimzVa/MB/gFoVCx49d49MR3JXLH+Z2H\nfVovJd5HIKJBjWlJzHXdbTCHQjtrws1YHfHK0nmnzT6JX6P6ySovPZviR/p7\nhfuDPfGbQCvFlHO7dI5b/NWstpYxED4y6I3HNqaHkv2npV5FWDRBcWuBhoQj\ncj2xEtUVTqn5OIFsCIxKFHh8GbSTGmq+zcjVaevDaTxBF+DYohsT2NUT6Gq+\n97hB\r\n=2ZPW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5rsomHcKuQGvOlV524XkMFa2rry6ycX3GH/a6NNJl7AiBVgIvA0gI78FDu7pcWwsZTr0J8T2wDWFCauE3YcZgRpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.05f3853e.0_1590082387304_0.863042854894301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2BvCDYXdrHvrhD2EcwGX3lZUuo6+GIfsrvXexK06nVdiEajZvLthmNkUfn0fjxNEKwH7+AT21wX64iNk48IAJw==","shasum":"b63055ef27795b316c3fdd2540836382675a8b25","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.5fe61f4e.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwmaCRA9TVsSAnZWagAA2aQP/1AURF73WLUNbRBV+469\nosn/R95DwFtgAA+FtjXnlKzLdkCwBqYewoq0MfCZ0qZYp0KFIbDlyHH0Bv4A\nCTS+4AcxgyD7qeP9kVUPkfb7505FhQ/6y7aLTeTausO5TRXv+Y1L/vCFm8Wq\nlQ/UTAekekGyZRwC2GmfwI+liN5EJ6H9njfxk5go2AoL2zkRHLjsaQvd/MOk\nW6XvxND6yiF3kxa+Q/BDIp6KcfqPPxuSsC8lCojkVmy21a5D4AUFKsHztsp3\n+gzzOQMpHY/sA9pOa7+zX2F+Wq1d7S81YQ+fL+QfVEtq9KKiJMvDMORCYHOa\nmm3sFQTPqVpac1rc3YjFNpRAQFAuPPWTFoBPkYJmjK5oFpja818AfcpoCPVf\nrXzhYcHmFAiBb7cbgiDhRSd+gwWu5OSsowL+Vi+g7f0hms06W9eh3dxuTyu3\nAkbpb7fUt14c0KZkYdwh41eU6+bO6UlAJ0pAIYWgkmXiVMV0TAkDLp2pBmCe\nhdw1LrIo5w0JEVygX2nqtnyY0z4gzP9vMBK+s2Z4EpAuEG8ew3BMAGg3PejV\nMwTARRjsMfquscDnECwCzqSOf1XG9BUgJeiurTWycIOGtmg1zuwFiilpi4Wu\ngQJlECeGbz/Jn0Tt9w1rPRhCm5yv2a+Z7K3n9BqixJ6eiyQQ6rhx0dXQgy1v\nOh+x\r\n=GCz6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLpgJC7rJWASenNtqFVKmDVWX3LNPPhIN9F3vlXgPDlgIgFPVc/MKkNvS5ww/wLPsf/r1YOfzVjHsOXrrhwn73vas="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.5fe61f4e.0_1590102425902_0.8433788178121906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.17d33745.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KWWCeTTDEoyaCiyGi+v2jMDveB13I5+IKRNAcViQxQyYymUngj1rMdPZANSnipdjD2grNIEIRhjdMoOov3LaDA==","shasum":"b77b3186dbcd324a6f3a602f68588da2ba61f8e9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.17d33745.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUAxCRA9TVsSAnZWagAAYJ0P/iBXvHV3TNHss68Vut+h\n4d8i5Nb8oozarRbi0to+yowVZn2TaB1FBpb7Pp4NTFhrQoc8YcRLvOUHLfnc\n73p0CzvQtsGzhh3UWq4dkIZ4GTgnHj0NVxtFzTagTjcuYcm1HVetZStX+6Q8\nWG0AMJB9/YUXQpKf0tK1kN8ro06hzn7fq8FfLBVNM77wLns2YSRaMKYEd6aW\n9SWPQrjh2+FrarUfKUHTukSmwrTJvxvAOlEQth6ls1gFc8VkS/xroRVuPb4e\neq7hLRLDwK2Q2uwBKx8eqU1EwnFGaQCmhH6sWAkYuWV+qlBDnjc6Bfy+IC7f\n9DvtfnAFZIKtlyKcFKinFUisdR+qfk+uIXeuKqRNOtoZ7Z4oSmrIOz+KicEV\no96/J3KZrdZC0zV+eGCG9AVAqVbHj4K44wNBO5eIovBjgz7HWMTPLptjNMEj\n4MtWcqdnaWLugux9flnyaoqTy0+PwgDfikip1gdZW03LCnanVp2zKwsCH7Zb\nFs8wUk64fEcv/giGrbUHQCwgcp1X7ZeP0bKsJyGjciudNKeIAgzCJCgz9pZl\nmDyhXY2skJqau09I5Q0K9PX7nPKWPjmHPBgE7D4QEKcB3DfPLMNrLnmEFu8B\nlxvzL7MFMQkV/x07rh6s2A7NBiSNwtOUS84bFoMbCIj3AnZiH2zWW6zWzEow\nbapA\r\n=Oh8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZLJzsSxMQUVqFp/qlDI4Ndx6R3ckr0NmJeYjcEE99JAiA96lAsMk3Yo9NnlV3YMxq/oN83IYrai8TIP3Kq3tpzxw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.17d33745.0_1590509616622_0.7413529510333545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4fyCbSiETVAGuvk0jfzDiLniLsF0SRd+28y3Mt0RgLVSiOI0+pRRtbDsO8YKJSfTW0cPvG38032FgIPS593Vpg==","shasum":"f49f4f81e0c140ab2491ab365e9af7105ea0d95e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.e8b52f5b.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMUCRA9TVsSAnZWagAAnO0P/3hv5ZITJFg8YD49Y30S\nJuTKnJFUoGzxtLTT2+zShyrkSOtClRTTmm+QqR3KQxkx9iISxfkrvNT9u9rV\nKKQHsBPQ2LMv2WhKl16RlDMQKXI+utBYH10KFGWxrJm3uFdIP1IIoPsRukhw\n//dwifrahWzm69cl1NUA2MTW7EN4tXsD07oB0oDITdjQa73xivblcBubGxyD\nAOdWf+d7+onaHrWd2PeNv0cVOcMzOtxvMAEIajI2Q847aRx7oGZudzccYfB4\nkkF13IO59upSd+4ppfZz+LJghfV6/dk/+d2f9TfuThDGr8pXe/sWnxJAh0TN\nY8KQGG1z0SevY86Xysz3b5yvuFU/RZilnMyPJ+ZuDI8LgqNIUI+7Ekuc3scR\nufLbRlenvDtC5/AFl5giSe3tHsTqTdSddJT6v6mZqAdsEC2Ldkkb8MaDhi7S\n0Wa7ZTNQsFBR4nozKOVLHF8eeba2qOPGJYeVSdqGS5SoqzDOoS5X+pwcfjMd\nCd0RAiyuG5/+oib4RmICORjwh/isS0iW9o05KbSx4Lzk/rGqcb9tfcUURiet\nftNluDBc9XHw1pcIx/DKF4U2OsiAuTOtYWpl2zrqTQRMxFHm9dLsnRfVuy3u\nU0/Zmt9ss1ZxvZcg+GhuNA5/psN8weAlBtR/c15jpBn88lB10aBKKU6+wChb\nKiw2\r\n=Abq8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX+T9Q23VeOJ7F1FOZGXnk9HCTCCXWU58vzDv8f7/6YgIhAL2xGt83+tK+hJT5rMwXKTuY5a72cme94cTmEFZIy5JL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.e8b52f5b.0_1590518545169_0.3550799900825192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6giurc14WL3qF8pTHNJ7MzRactsAfLhcBdNLfh4KD+5RHd3c3EwfQk/RXk2EVo7OiUiyiWhrLADivifN54NDzQ==","shasum":"803aba461c39c90e4c052a3e9898ea6fd2fa9550","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.09afa0a9.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2aCRA9TVsSAnZWagAAD2QQAJZOyQKzNbtKjXoHiAMq\na7vgFGt8eC2jBGoSUGBN6JWne9XX9T8JJrCo1yvL9ZoEJtEWR5bHC2d7qtAL\nA3XkDz60QCXsyfPhc0Hc2RSyT/hG24WPfkI3yzzXZX3GJsYGFC9SUI/tQVbC\nzDyqTpV/sUjmCp2URIk0eLFIaFAsXisBSQb37vfpqpNWLLyGtJaNYBjSDH+l\n+6spwwkqQF2E6Z+6p9qxjANZyNWe4NqfA2AGqHxIB2BL6C+b0TM7OWMmgA4T\nzvjvnc0HqSBeExvU+U7dV1HIa1iGK4QMDkbFy14I0c3xKNq5oNCya/elmOJe\n3QarwQT3TtAJkMCEqJmMFyO3MXtl3I4T2szoa/4sXnFTar/Cjcyzf3BAQCU2\nYsIpwvvvHbqv5XF1HPbinP+Iv1OFD28z7DVlEdnR1rCETN8Y+HbfbZu+VFEt\nOJ5UVdZmNsC4iOaKT2FmvOgzGowVbBqJJQzC/5l7wJV3MzLNalZOEg9JnRwU\nFzv4Lbw61vOmSyTUmr0pP2HgA/NzYg7wNf1xaDLAVQ7pTAtFKM0LDjhTwilQ\n0JWUuOQU9G4GZvw19f06X3DzPADlzFrbOwX4b5pbdUxJLMVEG+u8811xMUBa\n5ibMjeMBNKGh5yZuiXCspN6CJyqNwelThqoJh2lU99EoUAL50FA4UjXXrTHe\nD/bh\r\n=W8gy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElvYHfWxYyJ5ReKoJxEb24YVfNy5UurtfH/B6ojSkQWAiEAo6266sLadc7oM0BnB0QyZ2dUldMQq/y2PrnK4V/TB2c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.09afa0a9.0_1590529434241_0.7907274153807273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-48r86zZYrns2bbNbTUDFgbOv2TqmjPR0VKklFPPxwrg4eMcGrFZs2+cAfuPBA+lQl+BNVt+lKH5GwDu5SUSg/w==","shasum":"6ec50742246202eea6766ead2beddc697e9bf773","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.58bc9166.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSOCRA9TVsSAnZWagAAJdkP/jw6bHXU3/beSPnj2jFL\nM78oQITL7TXgORuIxOFUAqvB8y+6ZCWI8PTIpWKndnFpHEKNXKsqFhbBT8NB\nzDHl3QdnekzPB8HsQn/uvWqHOC/gihl4Aj8m//VCtFmLZKgpADG0KWy1hReU\n6vnENxZjS1rPFABhZHn9dk2mi1H1jkNIedUfWzqJrri7q7MD5UPipFnJoC0P\ngCy5q/hxpXtfRhY+t8xPsrPe0SuIOv9NHTYweSrZCPXVhOZCQ2eCAKpyrayH\nOA4lgpu8kEm8eundFofUGtWW102GdLNqKYhorXUuWEC2QmpOlJN/o1C3Vpm9\nUNjCGjq2Z3wGJE2puDc8LN8knaZ31JU3hqBGly9YQlLY/8hEr0dbyyKda8B7\nE9WMtgh5ju4nYCqN3YdPQukYaJUeHhI3dEFBu4cxOFwt8kVZYQWOMf2CMv5L\nbYnIJz72u30K9ABeL8WHMcR6j1msSd8NKfU84omL4nwU5CRAbXX30uZGsvYz\nTNilz3f5A6EalSXDqP38HjI39bD3ulq3m9DC8ZswlKZ5o+4lFq9aYWEwcwQP\ntq/Jv5p+f83Df/EkkS6X1XhZA/Ec+EszpyT9KDhP+USve+rS5Z4Sq5Xdukqw\n6Q/Gasox73W3eDNkIyJUwKIkuuKZm3vuTSR7Ql9SGwRiLiLd4r3Ch7tg+9n5\nIqQh\r\n=A3Oa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqZ0tzaN2Q2BhjNieujxsgcFjlxS8b0kPdA+RXNiMoTAiEAz3KgPo7vh7sxFyxBpojSZ2g8QLdwepe7eOFYyJA54VI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.58bc9166.0_1590539406286_0.31360445224262823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.43bde144.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rxMIK15zzznSH3sINafTlSaYtBL0LOA2R9QGBKolFpbmxSG9RT5uu4PWa/upw85Hp9qOoQTqu9MIXdyoM6XQqA==","shasum":"dbd7ad4a3466434308c811c979a39166ef702273","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.43bde144.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrFvCRA9TVsSAnZWagAA19cP/3tHSMWEGNCClY/Id0kR\nzoCUnAa7Izip6WxOTpal2dl3NqrodXjXNUEQWj/v7D/9jhYUPdACHnzbyFMG\n9GlUDOaHPbZyrdBLTyqhumxcD0blp37ZePm+65VAmCg4PnU+unlhW9GONtXG\nLLj7V3AmqNwd/jFE4l1rmpZWgwSH/egt28ZApORhnH/1Rct4Wib4NVU3/A4u\nFTUdFEszrZHA25gQcCAnELn83bciIDw46DPHSpSC6P5iE5yNOrq7J3FPNE4p\npBD6ckNStKoYGkI+gOBFSz46wyM1LTy44e/3EXHcKtAtqIsSL1QJc7ZENrwh\np+AfYkaSseb+yIW045Vc/2pXzo6KHLRt7zo8EPK0vwLw+1SC+sFZnCWfyxBG\ntBylua2/laAhW2h/kpxCAmMEGnbjNE1oEgH71L6BGeAl1Gt4Cehl1/hmrEWa\nYSiW0EPzv91RsJneMSRmifiSx75hUI5eDbCin0a5cY9CfyEB69gk12KPfuWU\na81dMaykEJYphSy7AmtehAKhH8SCuicGer6BNXQUHhMKmROmJjYGuh9VNct3\nqZjcEXh2rvBIH9xYgAS56J6rXG3N2rEqCm3HutsiWiG5fK3WtnHQgNlAq22G\nw8Zq0fvTP5K7UoB4v0c0wYiqf4srUTTqeQuBGSGIvuD5yeOK9oBjZRgp+6MJ\nz92Y\r\n=L2QR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUOgUP2JxOm+C2jzKlz/DY1zg9Cid3O5RyHhIrehQHkwIhAODP4BZb3jZdnNAtt/iZBI86Xa7YZAHDTGGqPFHPd5F2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.43bde144.0_1590604143596_0.6697798829750934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Tjf6hZG2jb3JhXvhDUSAyOu0NKqeLo3MKgeZI58DZ2kOS1INSn/2b1398n8mqyBb3Q4B+lw/JPkfGdRy6WS0eA==","shasum":"589a23d8e1f5a6b5a16868cad3f85870de7d5dad","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.51067bbc.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsdyCRA9TVsSAnZWagAAHVMP/3rncvbijt/XR2+ecfLH\n3qbXh7o0ZgSl/LjfW1N9rCI+oZJTzIVQG/9CsBCRWiwmAY76epOtgUbDh3bN\nLNWZ33DlKz0Tm8X5efovrDHmSnY+UaEQ4lW4n7Fo+Cs06xUnouToynaNY8Wd\nkbbXUaK9YNqJKnW+BAeay4+6GqeWOdHZkJkYG6g21rpG5Uj5IXDNKUyvwWGM\n84WCcj1ZKm0tofs545YhBIj9uOyaOzJ5Lcc60/UPHpvm1a9X4LtzlI7+QUn9\nyQbn01OYQhtLJMF3UTmXsm85ywlXBdq6BHh1W2chITYluhm4VgdWKeWMi6hw\noaFYyYkB6+z+eD6yV+CVqGBcbX+mN57aRJ3f5AkzWbIpMOGpEhqz6ZonEhSA\nWiNeQmsg7qA9vZ3YRrX5U5j/owPgeok1XzghFVfwtTPVOvscElSBQntROr2R\n567JYpMu1VWMwtBGK19qODWqW+x/d2lkwkzKrW9OPLtYSrSqShvNDgZiQox7\n72oNpZD2ptUUBoIRtNIxWZEpeNwgu+wM1R+PB+GWrI/qFYV6ZkmAbxoBeLJz\nFJHH+kaAHIEHOsorpVIRqp0AIocH+gVQi7MUyOBGeb7QO74gOB/vNFRSKSV/\nfapGoLF4SY2dovzJLs7IHvm8KR/3IBeRGMy5B+SPExkBNuuGOMcqgeh8OS2J\ngUE8\r\n=Q7je\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaMsuI+rsYXdbwJ3916FI9Np5N9cP54S+A4NvZa29GogIgSgMe+FXCbGitJyuillEcwBcI4VCHo6cZhlX6e3z5FDg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.51067bbc.0_1590609778127_0.15226965290410055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DBVcK9KlcbAt174cj8PjIPmycvghmVpr3MiwoxILJfHQnXD5jiqztoSTVhHC66Zot/8rSKg1Ycf1Bfbde+dE8w==","shasum":"1c655f5e510a6139e0f3f1b26f23e622f7a7a371","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.92751ffa.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1SCRA9TVsSAnZWagAAmtsP/0ccwUifQsXykRbZRFcN\n22kZvkZFpqMDIvofqcsIxbLWlK5UhJoaIZd2w9L8nc5rja2IDNSjaHRxfn0R\nOT5BMtdF0de395MnSUKaCCwMZagVD3l/r/c2qnKe8fGt4aDvJSN/8ykjAUjd\nCVxVh2YrPlMNEAYqaehujV3byAFD+iD6qhD6wCaawkSJ9vJBMIzIAeBh2BnT\nJ/4ZystdQioKTsN4YhuecVcem3g4YXhn+3GO09zrhx4HCGyXHc2XsaVagznh\nB4ZUFeFpjjCIQf6KBLbjY42mu0JXFEnXRqidtgyiSlV/oewwrwodHodPws9h\nERK/o8s41Eub6ZbvaO0nRHjr/wI5I395j/lS+WOxZpB94ltvmarFsNmBzcHs\nKHsBSUZzKdjA+g8NHbcclBz0nzd0ybprMgvVb/oOt3Fj+rZqeLiKVvVxm1Cw\nsyVd+0ezDecNmaPWuGP49CwKq0boCOgBtC5axF08ryQYJDB9aD0ZsJonYOln\nsVYXeuUBZmgslHQfQa+Y9bB+yxBqZGCSYfgaPhzi+6nYS4s40jpe/LxErVsR\nYy510eAuF55l48XD+3zaOUDITBSrHyiCUJipRj6aUP99weaan2FqZkcD8GPC\nmTeJ7riLjG8X7l68wt1FTFm9PU1Z2CzyG5ZbWDP4mk/LkFNDzp+GtjLIv+Gb\nOg6b\r\n=B77U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB41Qwgev9T2Xt/WGgrRI/AvAVtaGDjNZlwSXoOLVtNnAiAx1fA8Lh9KMB51W/lCSw2UwmEaKPss/XZL27Nb0PiZQA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.92751ffa.0_1590615377911_0.9591032804815207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ETXz0LDkPNnYf4zGx6xfPIgFcPFrkPjgpOQoWHoLxR5RRKXYLZ5wwBaaQEy1Lp0rJYU+aqLUlQJA6u40sT65yA==","shasum":"ae5bc8f7db5939f26494178a1475885c26440afa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.aa2b40bb.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A2oCRA9TVsSAnZWagAAvMwP/3LFpTL4mq9+vGy9WaSb\nVM2aggLpBzdZ7juYttRDK23HH62huz8cgNdKcOnWay6o/RR8zG+jkKmn7JAg\nwNcEJS1g9zN1pCNmU/zwmH+cMZtQrabOdMexOXL9aoK+CNZ/AMmUb/zEGr6G\nDsRHhlj/qMeMuirlNE1N0o+MtttyPYJku7yqs6gozWjZus/61lXiqosIP89S\nPDQp/Mf1lL7/TP8uZDOBFmoevbA0bPA3Kw7rQ+1aUvV8K4rfwIokUCHuMZwG\nHOn55mVx2oHZVqRrxBBen+9RByLkaV6TFBCpL469nXId9TCOvtkQIgyH0oFO\nEGiKhB9xi42V9I3uspMteJ6rr1dvb4mWNpqX1uxa5eEHcxv79Tn0E3F4sy5b\ninmGKPYMuYzOyAC3vi5kVKg1Vtt0hw1dv+C1aGUAikkrhC6+U0BXMAE62M/A\n9ntJyeQAadKAzi86eMe0pBexQWHgOvqwVD93sqb9KHAb4S9rb9AP+ICYAugh\naCXx54bpgBsWAJXZTESYmUCToalfYjPNm4YTxahQCFZ0xG0utASeMWI0zqfT\n6VRwhBGzf4RHdSGR6M3ulLfco5tvE1PxBt6HbvZmWsZof9RRV+ipevT3OkaZ\ncEZ6JN6PaB6eWyx2lyjkPFwvpDNrq7VHYj3O7yVWYbXIjRAutmKfJWmGL8kQ\nziru\r\n=In1N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDl1em5UIiWlb2G7qTiqomLXnPoohVpyJ46zQz4C+oQHgIhAMMHlvmJRkq1w8quxJceDNhG5iSAon1NG/sfoPKOnyKz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.aa2b40bb.0_1590693288555_0.3905704803248362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FzaXNuZhJYuZ1eL/TeRK/C3P3ptA26kZYFlPC6yS6yU4pY5rJUtc4ChqU5lr7w8DxZJV3T5NW6zs/6yEbjrVZg==","shasum":"4503dd4dce516c5ea164e42d89095bc121b2822b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.1a870a01.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqjCRA9TVsSAnZWagAANbsP/3SeqZStMKfLlG24NegK\n1IR3+6FR0tXQ1bZ1SPWIVZIOTyUnNQDK+QpWBEsr/Nm3y0JFBkPaGdqGbmy2\nydcNMd6K0jsFJgLJjI1VcHYUdLY0hWph3Nl7PGw78NhkSMslCGFEOK4rkpG3\nM0FtcyG1f19H7dDi5QBrlexip7qpVtyIy6plpUrM7wqHr7jI7dDvJmu+GuKt\nbMyxvDTfBLyBxULmd3PP9yBC2i/MaB4GhUsUSAbc86EpS5F3NFkbiyy79ckp\nIdJTinhyWeieXOnmJSc7mos/ioHRtgLe53KjkiMrIGJruUf3P36KbyZbRUd9\noVFQScpEdFk/yhDS/emcEMpe+E+gaTIkNB9WCS8jj1NO46gK+bxRkJJ3PaNJ\nmoU4qQ0DGCGUyVaDgSdiaJ0qdTxRr4eNw3PWicEbdSfCFYykFhV9grVcF6yn\ni9yYYgmuxTLvVWo/v34DmF7fAQ7vUJ3Q/D7e7CkVmOmN/BQxFj+7SUiZ8RNy\nY8AiuJiHv10fNpTh8NTSsClsqmXek+cj08APJy70vmbsN/BNl1q71BPJ4yc/\nvDWpo4nVnAA6/wl23AyMk2D997EVJAkmrWL1pjXzzIJo4w/CSZlT1UphVWnh\n0Zl1UDhnspj7u1E3UwxwEX2qGXKCTo/aOZzVurdiNi47qHmyDp0JUPslKh6c\nKqtF\r\n=IMzw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpL+w5/vRxFP2u6NpZFkAE+twEZ2meN1x9quAipXcRPgIhAKmNeziKieCPYMFOxO4ToE6iOF4h9NNOhYum4Wq14JfG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.1a870a01.0_1590700706832_0.05084969367226688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iwU3KrE8/cIrjlsCUfAS4odHI6crwwimChB2M8OeXrjt8Xj0veBS6TWIDsphDuCGzHR2Y+TSTYr6HXv56H1fpg==","shasum":"bd6c75c74d004d791bc976938f677030a40043e0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.ad57d086.0.tgz","fileCount":20,"unpackedSize":82803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z9tCRA9TVsSAnZWagAAPSQP/R8FkB+tfKzs8OU6bSPl\nk44SA2divq9m5eecN/q1wFpUN+Wiji5RBmnScfe85+eKrqWr8AcMfM5fk/0S\nk73miadGtqNVH54KHfyG3eVufjp7we65v9DDmyFr/Xf24lfQXIysZ3CImtUG\nS7017q2uwENIpuP8F1QR6NkgbJdF96Qi+AQWsX21T7J3nxEdsBirbzCGE/+K\nzycIJJrwcwsCgtR5jXEbFBz14qkjrl0NWS7828j3uwHjUf4jA3baBEGmCTLb\nbD+CoON3Q0N33G1IkFc/r3SUJZbDebtR2jDZBiqMOYwjWTx1Niyo3CkJlnnD\n9mxLgWRz+2485VDsi/Whn1A2lAWn6ia+ukFa8WMGUnQwF8t5NpbzR3p2fldV\ne6osL1PCaTezRHctr8Z5fjFoEHdTYsO0oncsrcJ3H96UX13Hmx8r1+tWoXm8\n/LttYiW1nq4BlI3TeVpFtgoq0+mB3ya36rsAgqSssGj4Wp7kuK52Y6etNmAb\nz9tfU0mneOQI3PelTEgx01sVq3gpsBDUCA1UDXiOYXcgttU8PWVcI/5Dtqr5\nrZSTGKQKRj3BRM6qIn3Ixc23M2zVgPWn3yGv3BI+dQ8vivZXT+qwGdQsCMLw\n3of0lkuQyszfWUrnDJmf2OAKEjdtOu8E2zt+LiMDHAfTIgF1nm/CaXVm85br\neVN9\r\n=Xr0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnlU9M9h1zfPUX5jjJ6rXDcsAYLLebPMKacJ/7Unl7ywIgKqO6JGP0z7PrzwCVSDmafgxW1tMhtbYA0kRw57kjMwU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.ad57d086.0_1590796140651_0.5571261470530866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Jp9G/LtVf7ch9ufX7E2f31Gh4eVD1TRzUXppU6JThqDHFa+awsAoAo6iyuhOBnHnje2/VfHIot8rzbgJRr+4+g==","shasum":"f0817966871756b4d3a2272f2daeed20fc50f787","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":20,"unpackedSize":82935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqKCRA9TVsSAnZWagAAgLoQAIrx6T6fMh8fRU1wfW+F\nKnykXjgTFCvFVlGlf8/4VfhdAa0lcYfUdDaCHOVk+Ccc2syF6rkIJ+gr3Z02\nrsC8V+WjcDPb11FqC9CceUgB2WKA9vTWsrTPVR2jgHuYPwTwrhBIxf17LTqN\n+HNrm0y7pBpz7lh6mZqzgUnO3JGgYW7Co2WPqb7HKfmf78cy0mgGYV+Z8VIM\nRXUIwuuPJMu20PrLGT7ylnMdoOg/CP978xCgY8qSL6gWpwiXeuSJn2VwE0fq\n8MlxhUirbddDxfyTwAvhHI+I/pFf8pf90AY70WLvVG3I/f3iKwvdj5L5AE1B\n7srtt1eP4BXlDsP7z50eWVSmlQqm6Y8y7TQrVZ1GgXvm14lOM4Y1JtTMlyrk\nRKDrqLZwdHsW8Oo9LXuZdqzkNQsuT2STbarb4FTofQKMW4s4yURBMD/mVedB\n2gIPH/zTqWIao2AfAkBU3FN1bY5kDe9/qheKGkfAW91WEN+UK13BmXLMdZgE\nXmQTOe5fRGQbLRpCQ/1WihycGmZkPG1zcXjU2UF5UdrvYqEFoMpON5+jLacb\nx8QqlwksJ8vA5a1zT67suMIQuOGJvXkAmV1bk7mOhfkplYUc7rl/oMMKaDId\nyLioClJYey/I4yohvjx+o0Q+E3Rapf3urtQKWdgVmCyh8sBayhh1txH17tm7\nIPlY\r\n=aJTn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLZMKLCNRnv2ly4ZDMLobQZIok2xPsu5xkboBqyfGcfAiBlmMY8ddTMTOaPosDK6O1FZLQN9nKEGLdLuUl0c3bShA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.3bf2b4d5.0_1590798986292_0.5402167109033547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4ae5DDc1LpWwjkRztEHQpo+m5ezyz9H40C+JWqrCyczuQFhQ2H8TjlDRt67atF8dsfGUFxRvUALR67o8qhAGDA==","shasum":"5b74ffe0ff4af211ea3c162f8f5ceeadf316c747","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.ac05f090.0.tgz","fileCount":20,"unpackedSize":82935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnBCRA9TVsSAnZWagAAbJAQAKGjCHdgT+t417ql8Myh\nXoTP4bhXdRGDBV1iurPC2WXIRuV/QDtpxkOoeCH7t6AF1j1ituPKkIMKN19Z\nEf53y2877BUgeKmXu8MPZVdFgAUUCexK3aES/kYEx6dhcs3SHY1F0jZJFGXt\nWYXEvgMIPREVzPaoM7FVOLpZX+DnlIlLUOXjJQKJ99BVELIjY1Mrt9/w7w9z\n1V97wynKuUdkH7h7UGWoSXTt0acbQ7HQ90Rk172nJT0Ky4DocUVfmLz6yN+r\nZn3RUTY9zoNZUe3xqeXEtGH6JJt22iPnkdMAuYGDT2wnyXU9JMBKGOPr75wA\nijKL/jMOe9N05VHuwCUHeK5vtw8o0aQiNWEL1pHCWPYEl19Nkih2luZ6NlZD\n7GTsbsnm/P1+X0dsu/1ZcOAiqVsUol4yl1/Fb65MRoqNAbsfG1kFiFHQr8vn\nlcK6IrjF7W67JuoUrSzp7l1vtMy8C9xeJDTWyEW9Dzh402vzkU95e+9A66sz\niDAsRW+JlHp0FlYyD540srwrXd9YclVb0iW9DwjV8QmvOD5tr2Dn//7JGgVR\nE5fl2224f2Ijiqn/4sIO4G9ZU/dsnNPEmLeonRLSHJHFsHMETvcsD5mm200r\nrPXRa/2tjw1XIAkOp1PId7b6DNDrGFTiotCgelX0DCc1QCXJNbU4BZuhs5sf\n6jtM\r\n=kgD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDlmDaa19MUFHWpzQsEmwC7HL0tutwV32zEunTHvLy5AiEAzSg/WKQL8jghEwxrDro7CQIgXsyw/BfVtoIhDe0/0Z8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.ac05f090.0_1590806976787_0.1091953713072622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JXvY/G5Lh5Q7qQPUFCpSy4riNNtx+10PoC+NnzqGlJwu0pk2WEdmX1EWH4dmY0lPkzhITTkTERDMQzts8TFa2w==","shasum":"ad0315f2d6505914b81bfa4021f77435fdccced6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.0ba7b095.0.tgz","fileCount":20,"unpackedSize":82935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctVCRA9TVsSAnZWagAAT98P/iMBw1zNQgJwCvspToVB\nCqRbVr331Gou+7+wltbZlNT8rmCKtGmu4u0cxKuWyDVe42ra8tJIIo2kF/f1\n4BINVZVZCkhEm91Lq3Hw0g5nIWTHO1KIhPr5fbvuD4A7tZPdgnvsHX1fwj3e\nneInEJyfTQ7fw1dC+YjUQ7PDitcgft0RVScbIkkJXkcdHApYoTC8vvtGW+6V\nxq35BzmHmMgLdH1mFNiCEBWO8Sh45P4LHpNA5eM4HWzDRwiU1wkDo7oSJPiP\nhkA4UmDFWFFX2inJ3nqQFxB7Yh0gXejfJ38fIjQ05NeoCC2Oh3re/SF3CV8U\nNlXcFiP0QOi1aALgiZ+zvgNQWAeOfVcCcC6W3r2xgPkpEkm+MolqxLQmnOf/\nh09K44aOCyl8CwHahrJzomY/QIMMleBEHXdA2eVu53KvS+4DadlOV/69aEv2\ni8hU5uG0g1mW4e1vkHHLSI4zPos0Y9rqI+FddZc4il+jI5Thh9/DeG/roAab\nRZHw5V9/KZRZPh+w6sIQXNOrIlmAdw7bi1GpEL/ajCUjY1G95bXwgQOPkRTK\nFB6Wk3UBaQXVgeqZZTyR5GvTNZKv5xgcxlB/L55QdKFHf0rFB8mu8yXly+oo\nAsntZ1J3cNcd+38cHiNIxOrdPOTOySgU2CuDVFpB6LmaBZqUDw/vOY4yzK5p\nZytz\r\n=cWt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7QT6359AMbXI+ApnfgmU3wxC07a7G+KwYVcDt9FzelAiEAhJoNmoCw76Qo83CyLg5EdqEpLw5cVI27ZUhxRNB5Bq0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.0ba7b095.0_1590807380813_0.04819402000359818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-snackbar","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-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/snackbar":"=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-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tUBFdg9y9eMuWzDrgtqZq0T9S7igjciRNeUoPjA20JYTerQ3zRXre7IkKlLh6KBa1a+/W8A7a70/hRx0wmMEKA==","shasum":"fec7b8f23e481c8518613f8f51ce4d8089671142","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.5eaa9bac.0.tgz","fileCount":20,"unpackedSize":82935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8jCRA9TVsSAnZWagAAzfkP/i4H8MmrhVaGK42DszbY\nPifK1ZAVJI7/S/hiy8NcK2ggcMfkgApe/C/b32x6udgpQYBJ7Q8/9DkN0uE+\npy07RgAogDNOtyz0/5KJq41Oo20mRxqvu3ZKP6iiuD7QJQAC/3i147ksCHGT\n+bWLoS8d6yLaRKLrcjlV5PwKKsVMfMw6/c4GCYphZT+ymfhStT+8lQHNJwzU\nc1JFUZYEYJ2KNZ45OTUbx+HP3oXcFEjOtcVW9nb0JQM67lb/rxeL1u+06Jdj\nqTPbXQPW46j5W+SVleiE2jfh7IfHMVnSabmC4GXNXxXf0nG+CMjTTo3G5m/b\nprT+hNJF3i6Gk5JERESzwzzCL3lm/GkohzUYj/Mq0X4L6/P6lxJyHyT5rt2O\n8KiZXjUnTJIBpYuYLhvuxEpRL4GYpvwswkC/5B1iWnkAqxQT9LfYac3XUzjD\nb8Y8LEPUeS9ATt398oUXkqKgSyMGUHLNcPG8t2A72bih+i2qWbaftMfCdiAH\nEGrsy9vFnKrDIfMr5WykkXdtP2+uTzYQlz8ePdzM/+ocPad6Rh84aHi5A6bx\nV/kftiVrMXlbNkhCI5cM5DzexuohNIqjHvYKQRXo4KsWNeXGmL3fu4ZRj5jF\nD5/gKVAR80D52QpduUipKnaT3cM9aXLkJswOn0IQSk8BGznmO8LaCo0RYOmE\nB/zT\r\n=aYat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnVn8r97bpsLoX5QPBEnSwPpgLf8gyERZxbbKI2PnJJAiEAmMt35Rfq0c/pRFwP2N/6HrDQC9Yk9Z7kF7PFua9YGU8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.5eaa9bac.0_1591054115021_0.17266984895689008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.5677ac20.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/snackbar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HiSlACj3CoQdRuPyrnkfEvxrMstbEAttCzjTNdYm2Nv8PIxKaJ0dvXHNzohySR4M0FeTAKbhMHb0NSgx4YAafA==","shasum":"972c2942d87a9313fa9d0afdbeb4743480bd4152","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.5677ac20.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXICRA9TVsSAnZWagAAhN0P/jDsZyb1Dh+KeZSNRMnb\nwUa2VTFHRg6bq1Rna6kDZr0ndJTUFzGTVKjKkEmw0tosPolkF9WmDcwH//fi\nR+6LkdPuBNygixCAeMa6xlpD2gkW/0l1FOihKDgmzhcJEWI4Tx8mcMihzQuj\nr6mcCa/8117X+3UfUrzS4aOeyISIlBSH4bndAdjoE4nG2rCVGo2UwYj/sBvy\nuZQd20TUfPPJPOsnfueEESQ1Knht46jRnok/TkrXEXOxE4VjM+HOLqrZkrmq\njCehdL9JsyLIgfBv5zddgkp7hzYCo1AcuR19FNykY64bAc1ob0IS/Z1sgML1\nsILZJf+ksvJ0gHGfFcdEJdwDUww9LYmwMyXfgdaNnP5k2RZ33JOzih8hIqWx\nqhnl1Ts59qCvWdxaetRcRFwEVm0jbBX3bVRVRJgVN3yU+ui4wbOmKQgDCDk3\naJi39I2+HNxUbosIQo8ZDShtQsEqvCdrFtTXGUFpXQ95RKft0qMNq0F6jekv\n1nBb5nlFuDdbXFAYxxPhqLhUcnp3TrZtbRWS3PEjD7f8pnurYWMKqct5UWZa\ngMh9EU3tB5bLUTmA2BVIamHB0ApeDnNEvOLWMTRcxk6L6VZoERgbTOUshafL\ndEhLi5limpafgj0BqyKwTGeqGf8qFb7dDfm9yLnoc7cAKJEdlCNjlsuRMY7q\nkepI\r\n=DFSS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEirSW07CrSF5yG2DnWzRGzTLP+Vr9Gm+dFkA5l3r8FJAiEArNxt8ZsTBowiU3EZ5hyl93rwCypH93UdfHmu74CmNK4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.5677ac20.0_1591055815885_0.6731074055925543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/snackbar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qTWdduZ+posmXfjncEDbG8EuFTSBDNE3g399dWkjYZD6/mBGyMLt5PmN7pCpVmITEgG8iP/0HMhWXkr3zsf3Ww==","shasum":"6cf7355f5c0ecff6dfc0abe98e4ff4476f05a6a1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.7ac6bff4.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZoeCRA9TVsSAnZWagAAaRoP/2cbC1OWhJpCbiRydNeH\nSS04fWswSgxAaWyjArJSzzRUp913dO6Vi4EjquK35XMjuj6O0EQKVmSewnSF\nKSbd+5CS1ywkLehQv41QkcWiMVcGIVRYHf+NLl7Q0mtivUerGmeTQ962kdEk\nJH2KKco0wpK7uPy95r8Mh1hlmVfM20DJkKIE2+zvabv2OfxhTIxoyPVE+jfa\nCYYreq0y8iUPOXjXOn+9mEZUFuZMJwp+CW2dMBif+xRDH/DIeF6OJwefYlnG\nNkvcX+HYfZ6QlXItwzC5wp7HZXhvM7ziwaVwDfXJsptkfwG5nwCKLRgbjZhh\nPrjVpbMLH3tF1y32klEcHKwPrP4Nx8zzPlIFhDRxEuqpJVIuB6hpJ0Vjdy+4\nTfqs84hDhsdnJrzq4fgsRqHKt290rTGP3Ozez3H8fjebgwDjfhbQSU9kHFsQ\n+7U9QWUki5JU3L9FacdOrgLl/kp4edGXCUoIra4rK0uruOXrvUhWR9zMaQUb\nFyydKbW+x8QRFp02D4caFoIfc+btLtMXM8+tIJ0qr2q3h0rpYJHMidHvJ5xG\nthRUkEqKaUuQLkQAkm2P7gnK+m5YoTviRwgh6qhyzbsjewql6nSPizfwbLc1\nV1ubpRlYqjIz9rYIU1uLGLOJwsI6ahIwV7De5WAXj+4JCrXEWkzGouSZGccM\n4tcT\r\n=0n4/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIByF5yA4zQ1BtMJOeC1dPv8+m904wwFBZpnAOCO1BzuWAiEA6BxJaq2zHcvi7wCBgnQYRAMx7mqshRt+zj11clmd+iA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.7ac6bff4.0_1591056925709_0.0010406835659340086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.d45622aa.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/snackbar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8jOjRO1bWvqkKhBudJvPK414HL/cOLqNRflIZhxkMVcdAEvZasevQvLMDoMtCXWz9wQl9HjCvE/E1T585IwFhA==","shasum":"ac031e9604ab0723434b3971381db7453cfab147","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.d45622aa.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uShCRA9TVsSAnZWagAAjW0P/3/3nzZQL5S/Fk2HK51Y\nd9qxFgQI2llyX4RoxM7IJA6QyvkJCDytQq0M0vOdufZQsIq/WO7HkicxWZHz\n+vMUbnsc2dQ9SWeWH1y0gm6MSQJjJE76VruIqyuMUUJ2iPx4e0EHqM7k+ooC\nIngusK/mO94F7wn5CdPXze9cWPkaaA9queAoci5ArNQwSuQkpCykPUyRmNLQ\nodwN2qkLcLhdrhx8UHkzF2zdS84iQ673B9lhwUvCFQsJpjJ+ow9uuHdPzeMX\nqQT4H8V4DrH4En1MvEL8Og8fdZSNc+qtWZFVG9gDxbaj4y9KYp5+t4Kl6Ql6\nKuBzxcetxWWkGeEpk4N32fDhp/eEItZVIml6dDmdFjHzzrVM4FmXBnjxuGOo\na22aeBbS2yel1VUjIoLd8QeecS/4MiRY0iSPjJAhi8v+VGvcp1gi2/Z+izyq\nX1F/I//ryEbGZt9x65G5VANugUtyFNnqQl9J5VduRHUjkYXUGaGeKMAgIqDG\n/2AClTRy3TwjZWa9EH5cvP79mMhqLppwgLuPvNAQaHLXPedkrpkxS5SwzK+6\nZ7Y83yj053kba/U0x/8SZc99zKeCFXqHIDsz5zACK9PCvFOs4K6G4nsuiRwS\nIcr4dl4W55VJmMpBOxGDqyl+LcTYYsPrUIppeepB9pUmjwccBU5Qme7Us1RZ\nEu+H\r\n=YXLu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwtMkbVhpJrna5JzuMneqHLfleP1gKjyzYS5Bey+J1eAiEAvoIRlPqmlH3xdJYrjxs3GnpS0FkWICkK+28/3fBjUxY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.d45622aa.0_1591141537139_0.37458093327572306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.dc26c709.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/snackbar":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dtyMRyl6E8g2Mgf4L73U0XSy/SlLJ9cgidD46RXly+ATVW0Bd0qCxGtOjRallEjbUXMob0a6iFLSSn9iU5CPzw==","shasum":"55ca852e8eb77d661d3cf363ddf2edeb646eb9bb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.dc26c709.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkiCRA9TVsSAnZWagAASzsP/04J+QDJnXI8pd7ghJWP\ntAGnzaCea1ZFE8OedixTBmhM29BrP/vDMSfkvci1ISQKd4pjOS5DPIx1jdqb\ngbS5Dx4ZvCDxIVpfQP/SPtyjmAylLTBH8laVgfdPs9ftYSx+XV2hK9bKA1Nv\nRnIVdkn+R5s+NvLqar2PHXwVMIAYukyqsJJennGxmE4GgveDo87TjJ61mQrA\n0i0xcYtyIhXRMm4scZh0R9Cb6PpEUnkqSwOYEwEuqFj2V1WKBtzvZNUcRxq5\n/wrZvwtDfN0dcXSTznlxrVFaM2mbeezibAbNVjMjuw3mwOUHjb4sizczKxaO\n+/c9aLJQM1rPf0IpxGgs49sQYdbtwOitkk/7iNXx+i6+VJ8k8XJnqq4NLeiE\n9gQxbDc2UaKO9xWXI8TpfZtjRFZvUqxJnqcM8atkr3hP/j82ietRuqmv0Fad\nUMF7bnT/LTR62Fqji7KTyjfCLcCWIJ1/P8WgfvltQXItEci4cK5mg6TTXF5p\nzxwY6nFO4A4VULwZc2xSGZ/iiYZ1CWIJDOF2+BXGU8Bij9y+5Sn3myJ8b4NN\nScUxUi0bzPZqmwPCko6AEbU/LHS51ZnYnp8NWZ4IYZh/NnBLWH9NuXwaD66v\nhQcGVDlV9dPCMJTrKQ/WeOxGgvKluIVhu3GIfS1jVBstIlz4qsPlnBPYQ/TT\n7qPN\r\n=/us7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe5MIepUK7EJQlqMoO0r1DhsdOaSzEG0w2bf06nCb0qwIgBvieP2RnyaAocGqTxzjP6I42BC3nu1erht5JTga+pxQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.dc26c709.0_1591388450271_0.28432850590902525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.b9baf6db.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/snackbar":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-T9Usr/qSmRo6ce2NW4pAOtLQsA9SziSqzHqSexwpj86eSESqlLo0KwF00LVQubKhgMQExdV2Mdr3Cm3C7cmPxg==","shasum":"f78c3a7b1407ad3e19454aebb72efae12f44d649","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.b9baf6db.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2ql0CRA9TVsSAnZWagAATBsP/Rif4JX0O/6B9SZhSh70\neMgIXP5+g3h8f+sBRXnPxB8h5bdul5UGGCjAL+9QUSb4/l9ynpXxj2EcXU4w\nXsJhbQjW6/2g3TscdkbR+ScieN3rFJLn/Ay/FDYb8B24i7ycvKaD12/u97hN\n7i8EUin+V6jWkOeHziKwgWciaPj7LMWc4V00rbTiWnVq73utf2o5u1WmB0qD\nB5cvWuwRow5gf4smN/NC9Lc0yULkcvValKnOmwrqW38QD8u83fQhfRVkl02O\nNHvc18pqjZjCmi6CmSNji/tpJBXZHTQMRNUOhcyVIa9J9LEzwoafZ5OT3d4h\nHpq9CyVdqQY2XdKmI+rK+ukJKEiUls9UtRsNNZQw1FCcFiX1tOJwQV6p9DAv\nEZSKQCmgKfYTUXnj5/73MfcVDSKHyDD0qGQR9jedxP7QjuOOY0PZuSoMmKD+\nXnRfXg639SIvFO7+zd5eX9ix6Rk3E8Hl/JKL3RSOnBVGipoZ+JLxgFdaZzSW\n519iI7LyGzv6p0va2D4JC2ZVLqY3ZIwBVeiTJqbhwCEvUIrFMj9G18lovVW5\njTEjAO7gM8amnCRLjpSsYo8+zuZFyOuGB2Mc9NjshGCYzkz+BYx4gcIOjtfp\nn89ThIK1FdzmMbLm4FZCvdFo4Re/mHYIIFumr/kooOZvD7wc02ySO3YWG6Os\nR45x\r\n=pMd3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqcry35HjgcTVVsEsgAkbTFoTvn4sAM1AtKvLHZUGugAIgFQF47TNkRrRt/WrLfz+Xseo97AB9xwi/huQ83VBNnKU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.b9baf6db.0_1591388531908_0.5189174621245238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/snackbar":"=7.0.0-canary.a0dc2b5c4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-53EXHC+fxW8qiWmw0Y/r4rSPZhKKAy5fMG87mZSxnU26DA+JjWqdgnLKnSn6Hxa74wmTwVUFP+vo5dI6S3Udcw==","shasum":"8ddaea80915a7693665e1e7dd6492a3a3cb56696","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s96CRA9TVsSAnZWagAAs/sP/0f+eOAK0FH0uW0rWuJi\ni0VtbaZSv6mKdVm1WTUGMdGnP59rlQ1eRFtM/Ixt8urn4ldkEEU0mUpzcNfp\nM/4ADeQ42vYBuTH8fahnGqlzWdq0E5amV+Te0ntH7kuF7nfhOdoD8cp3roA5\n7Xl88FCJmsNju3ICRjihbCDKhmmixNFWwH/WDq1uTAdBrZtT0D6DvLUmo8Ow\nEcPkg0dtZqnL32CsjwKjQOXFdQOyGNl0hrZI5Cmke3sjZ8omJYkp97JMnVh4\nwvPLE5X9kiLzQ62J8rFsrbxgKGVb6ZuNdnAT2iFYAGTF/MMybjt3xhcJomj0\n4HXvzCJ0B+mI5DScPuikij41mgnjk4VzcpQ/gmZpTv09agGtpKW35NNaaH6M\nSRbIQrrYWSDkrPolO9qEpHNwJLQT1/IsFhBRaTjKdDjYl/YVyN+G5TANQS4U\nVKf4V72uJMfuLfqk406nuP1NNfEtmk0CPmNkvKvjXnovxr3jtE8K52JOI7pU\nUdfL7+ARyxbWFWSDL+DyhiaGracp2+LLHVywywdgE1Na5nC3yjQ5gcE63VLs\nYzjm0GyhSBtzx3kd2QgGpsYCiP0xK/nkyEKZ2JrY6Jzzshjiy1j92tO0Ii9U\nj/XRHPerm+D5C4D0wq1aSzlNDT1HbSVmMrbEsGfysLp21g1rezwKqehtQO4u\nJh6Y\r\n=qtd5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuzEAgOgaD5oa4jfFMaOkEw19cTedZV3RgsZUwkE+bVgIgSNEG/Qwr3NH3WbxALOTbWdGZ5HRyF+eCxPTTOYc10FU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.e0b8c9d0.0_1591398266165_0.35221075505706345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.51552859.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/snackbar":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0ZMTNczkS6K6igWtnzcVmiKaoRoV6TwVEY57eEwALpJdal3Q0FeAWB7AiurM8cYyXotTBHteGdBB7IgjfUVEtg==","shasum":"c7a7c7c178d4944e07b079184ddd80792df2729b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.51552859.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRWCRA9TVsSAnZWagAAyzQP/3SBUryTsjyYR9DejN0L\nVhBUhA+64CRLaq/IzCbtnzNxaVOG3ciRPtVMv0uTnv8xBTDQaR77I8NOLqun\np0f2x6s/jiUw5Su8vXZKHf5D6e625CPKPgU5oLRRxPJ3AcrGD9aAIvT1lvso\nGpG4rX02JbGKLCBlPvL4r5kaWj+JsOs8gZNVZ8ADggPcg1ELoHQAun9z1sMS\nmiLI064ua9t/herm+/f95dbGxurlGI39lCeU2oXWj68pJoNsJCuvOfPAK2zV\niz2bfzudw3aJnsSxSjbfV64o/6Px02UlFkS3Oy0cvhgOsRvv227rDko3UN1w\nWLzvaJdlc1y6h2FYjE4D4Lsx0v/JgoshLU1zsZBQfC4IM/vRG5pGrFNA/cx+\nc2Y1Zn1ohMoZh7DvZXxCTHrpzUJ6cFCjOzie1XdecMPPpEzyVtihzOb4K1K/\nbwwPbY7Go34Z/7E5gEDbOb0WixnWhFUiL2hF7t+P053s328FxTD+O5gb4xfV\n/EQm4fQA3N807hSPbwrTBBn8W9ZJWZl13ekGPKguvkon1ay/qiX1UyeM0RUl\n6R9VSzUJG4Gm692fjAXBlr8RfARZqiaLExlCBSNr1k4wDiouvtOFR4cRYQA0\nq1ymCI8e+BzV1+1tFy+TpU2xhxB05iyihCqCumtR2yyO4I/bRUOXoWhlQUah\ni1ff\r\n=G0Cu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpaq9RcGFG+56wCdaH1VWKXj1UiVKly3StReyZwGA7AAiBbyP22Ip0JDyPtKW49OcfmeFv2B7p7q044Tbxdeg/omw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.51552859.0_1591747670236_0.38588627940642795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.2e269285.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/snackbar":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+klQsGW7OAUqhA3ijJt6Rmt7lLN2X/HmnwMdRZSqkf+DmX1emiDSt1boLWpFRswK9f44X87w9oBztbcYoXxhlg==","shasum":"821ca08212a418f7118612f95e79087ef225ff4d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.2e269285.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjjCRA9TVsSAnZWagAA4fwP/0pnL9v4nVYerxfIDVtU\n54JM89JJ+XRhlC2dtY4RSsu+PA5ldhfYZxIQQ1ry7T6DjEXMlBZuK1YsYq5c\nEQf+lkf078NO4ltlJlvcCCIOALwQpGdw7W/3ky/ZgnuCWl0bnhbqlBath4F6\n9RUFBifZ0ncFrNo6DOL0u1eZBjKJXgDbxw5AF9xIaLL7hyCkXty/PNHoDcPR\nCgGhcsPd4o+Wuf0nfNGZU/Ee045k40k9sJBaZuD+vs3LRhrkNt/sV9FP21hX\nLno7oRh/pz71J/hyfJrR+uNW4/VH9uQ5Wjo9A9cNMzIbopFPdMKx1BIqcaO0\nMs/o3aBeBO/vvT7s4gtRNOIiACkNXzRrMZFFxJpyCMNB+RPUPmPJlCq5/soI\n5i00I7T9bL23s9EiMI/WU6Xu0a6uxTGDcjPWyce7YIzzlezVHaPsAN3jvCg0\nb8w/Xo7EIRJb2iGJdOKlKaxPmHW3Jj+WSt1MhHMLb5ScbQ45XxZq+6eUQ2qN\nAywObGc3KE9giSiLnOwU88PK3dYxgme3pjurldLAsfOHAWJbF+k/FLIO7Bk6\nB7d/1VHc8kJctJCegUbZXQBIl2yGRknbhKrPM/HLwWUoubjtNT7YKfxMMmQg\nEC2q1dY2z3Fqqh9OIOXMoKRvjhuVayILqJBA8X+rbLsvzTipFMSqAHkNr2Lz\nPA+b\r\n=P/Qq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG69+dcfhnyOUg3rrCvKvJ3GyyknIPTUHT32jOPq737rAiEAlJNOvAYfLEgfDDH0FWfGcr8awYJ+8KnQdZzTY9CLp/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":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.2e269285.0_1591752931119_0.27868275412374466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.be138b01.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/snackbar":"=7.0.0-canary.39e6f71e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-89hH/F1b6VJ43oq3KCCN/HNhh5mcu1RdbVKwzZAPJHsJ7p2u51NmibiR7lCjPFTp1+4ZdjD/wN/lUc5zv9GcKw==","shasum":"101d38d34084f5a6c46ca6a4e0455a9984f54e92","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.be138b01.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Uc2CRA9TVsSAnZWagAAg6AP/1wvPQM/2j/8V3Re6BVa\npWEzCnkYCjd6hmTWI4HJ2SdXNJ71xx8K8+mvVUuCTNqb1zhZhLZNZ/6UPgfC\nFOpmoy5ow1DcJ60jL+OLlSna0KOmjgvCUvlHGLHHfViXNwk4B0W8aWF6qQ+t\nQlPhgbx9B5sW/pPQ1WEGW8e5HmW1qBtSZTAUAc40hq05aTA9KRj6BW0G/NR/\nO6S2FtXuTNKLswh/Cn2nptT4Cp1sP6aYAK0+sdaG0vN8qSOyzmRUV8d0Bhl8\nXMZcR5V7ZlDPl2DuDWNQSGJH5RZJ+/ImBdTMEYsogq9mxAZzTXmvKFU9+jtJ\nK08BBgkkHzKuhnGZZrfiFHp+4MkCP5Zs9gh4U5X1uovW9IdfPGxFWPxVAlYd\n2Jp20d3m9tULhlEtOX8xx70LratoA9hoQLqLXzh+cb8+NvkOLfdKwWRhvJTA\nWAx4TMQxgQvIhpOCQahsuf6Ta8ihhhZESp+YOnTOoQykMsHPMmytLPhf5b4D\n11rSI4gnMszG75Yv+pmyyp4nqhWf0wJAd6VZBck/yjCNzQJzYcuXzwTjbhd9\nGTDmRuWGzsQ2ibe+pDC6cEctc3X0ehI8ylUeWZa2BdjVAjfmP+m+K1Xz5BP+\nPZ/gAVnvzx58Mkv7R/o/6W5MFVKL0o6d5MC2tBpIE1n9hf1AGJOnd65soK1m\nrZ3+\r\n=ETRh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8vggWW1Fz4VTKELSfgJeYAK7uA+1g6k3RaZ920P6pEgIgGYHOj0Hq4SIagbMxJsGRzWWFLgPzW3nK7Y5VReaU3mc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.be138b01.0_1591822133599_0.6051996194059954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.04bccf5a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/snackbar":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WqUJMEasVIWAtGeuv7/xGWzwN/1k4/OhTGxHW1DYoXFkVF98klxo28ErMQbRmj4MqtUIJ9d9R2kc2M8KCu9I/w==","shasum":"3f399cb54a1c8460a2d447e532657c880774a256","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.04bccf5a.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BkaCRA9TVsSAnZWagAAvb4P/12ePEJohKoGhPUGb72+\nT4u72zOPT7R6McMI0tlCtcgTnzgQD/E2QaTFcuMdNhuFNUNr/BAG4MiNk6RU\nYxZd3Cp66m6NuTS8p7i8SPT06dYqSm5Dyx+gVHnANqolwT4ZTd0skujA1689\neFOfZKeZV51a2s3JobQDdXPjbTPMsj64QqSDbilTyQtKKbR2Om7smsKbNTsD\noRJIdBNUgLHR7rIj4DAkS9WbHWZnrXQn8e5oARlBDGOOUXsjCWpyQahQnD7h\nzkWVBTThFEutXvUx6syoz236SHl5SLhqdjQMGDwLv4F/hTj16ft4QzPMt8g+\novOD4K62RzV0rUXswxnGIQTjSZytHeTdJN5VceW3r6pvzBTffHcMY43TgGC5\nZL5AsAVH4XdvFzhzj24NtdFbTA1Dr8hpEPZp2DtcfnhTiWjAgIT7Z7JsW1EM\nOMcfI3YKDJV+8oVVo+gENxS6jsqplGoW6kM/NL76LdflUw74JkRVJEhoB9fE\nWDDsuMTNpokmwXykS12t7EbEhyHp90Y/Jy2wIuk2PhnAqysEHzoqlWkydyxM\nEwTOo8EKSwMtLDmgIZMuHHo6Mg1aZPEUa7ik3jcW2fKcTphYyRRCXjPUdCuT\nq9BbpkB3LVLB2g/y/ZjLx6mwhNuWFaUlkn6CSFYToO1mUbQrdUOpOQO1KhaT\niSPn\r\n=qoQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDc8+QeOOSlhBFgQxIkQBYV5Bj5K1DKRqGv4NAl4LQsJAiBaNdVO2uIYS0ODarUluQERTD/f21xwTYLeIvI0lwxOpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.04bccf5a.0_1592269081681_0.4374935831525386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.b44dea36.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/snackbar":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-grFJfyIj6ZdysPHpIo5td2+UdFwd3HCZKeE59QJ/WGUaVotweSUA1WTS9Fp6MP2rZQDTxUmzDF/KnqoksbeWzg==","shasum":"d3df363be09bf924dd5a96f04f2b1681483fa38e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.b44dea36.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TI6CRA9TVsSAnZWagAA3FQP/2N+fCx0ET38htNgUnfD\nfYrkLPHe+LU/Af5iaVPIIAAJZ1yCm5LCpnojMbXaOxhNnYKk3+FxoLgS9U0x\noL0sLA+vWJ7uk2L0NgP17nqRoqB3RX0i9CgxbumFuzDKDGEbKpaXC9f0BH+U\nmh824cf325Dpwmu4iRW5PXz63KbFsKAwsQvvEg8+UeG/ytlT4HNmK1th58mX\nl20o/gNQy/ctN8AJ9ZyDmxR3nneOlhf92jW5YZzb0+1RbL3bbptYg11TL3vJ\nP6vfTeKs4waQgViusNzqAecxWd7ZGOd8MYsunzi6CXrUAPYpuBdqXBVWhhin\nfpcesSAMa5oMkSd1fMdvweezTeFvaJdz8K+sUHCHG/Lp32/AdvSGsIBGwo9T\nZ6tX8CDhfmPWO4INSHQdSjEIYwC1aR6sUioM7hxAjfr68diio5G/LZ8s6tT3\nhjODuJ2Lal91yFD5+gospCqFAv1Ya4yIUM5vf1PoPcRgICU7P2wBqOAPccId\nz6AIqaQKDf15UHRusfXomcH4EZ3RYJbNk8sgEH0+aQXggTBCzva9jqdwbsuS\njx5K/Xxtrlibqf2L2jbP5oHXfu5iWbxRzNn3GLh6tkync3F17tGGhEcWu1yK\ng3Pm+cqmbK0qf2XXupYasV4vgUBYqyoThpOoJy6fXEk/qsZHIKTUOjXIVqL8\nu1h6\r\n=LyVM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ9egb6HkwyjTjXy6h2q3S1r0vtDQeXqlHX6hRHKt6XwIhAI41LNiww+GPa/rHYhIsaPzIYH/bhkE6/afqYOf5DhYk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.b44dea36.0_1592341050282_0.005204154433973596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.e2577e87.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/snackbar":"=7.0.0-canary.a6ac8f629.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CU/XAf+k8UScLUDR5GBDIL+4DpCsys4rx4qPF2nlvAxBI/tRUZpt9lllWp+i8baPyta0vUCrcKrrFFgRc+1QMQ==","shasum":"8ee54703d60bcb3f2c13f45c3ceef49d2f6814a7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.e2577e87.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTKCRA9TVsSAnZWagAADMYP/1NemqMxjRyFHAGqRiGI\njgE00Mo/+UTlWpoOZq8nqNlBoSj/+JETi0aLnPzMP3wtYXtxKLjm03ClofOo\ne2WIdT+QqzRRGkyA3FD3feq+KY2RBK5k+ybV/uRYVwFVPXc3E6EFJAaRPouW\nkbEoCv5cQ7z7lWBOxwz09iSUFEk5nxaQPiK8ziS70sq/w8Ry5O6o+Nvq9lq5\ngafD5oWOPVfzdYXu/MDZQwpdnBL1iGq9vPna/71b3menEcq+9xs7zacs6PBh\nsN2faKVSxHDHLwm/SXmlPF4IZuPn9bIrL4P7sPM4Z6Q6TNJB+eHEVZU88N4q\nTFyHIQyvGeCtS28b54+g4QgG96OyrISkOBGR82FxyfU/bN6PEZ+KRc51GDvg\ndlfC6XAc/TEbGZluUIoaa32QO4p8v+Btln+Bm9Nbr14sk9pr4VCk+zuiCg2a\nVs7l3yL0yd8GOrWZ411X5axsmTmzPD1quQ5xzyDIhv9oe8JN8dBcgLy9UDnC\nAw0lZn8kCVN+3SbguTbf7DklgoiQKFzwtdM5GIWZoBfPQdXbwvTTB7vqwspg\n6dVD5mS2mnNM+SsSblICuHXvym1h12iIPAyfwpOFZzUQ0kAl7YP1P8ow8gTE\nOPQAvAOLqKTWGMj0yKJLCO/z+j8KdWsTHIqEYP8CjrFovST25ugilNwNU0Tr\nVTm1\r\n=bVVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFUtek11ptGLNLPFfYR3vTeEUzxlo909PtMLxM+ZbhIDAiAvcA0soIKNvUeXdxb/YPvRfkixlp/xD8nCkrdrg3EqGQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.e2577e87.0_1592341706310_0.4328640716678762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.58b73343.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/snackbar":"=7.0.0-canary.3aa33998e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.3aa33998e.0","@material/rtl":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3t0IlBzkEaZi1NgmuoHrdazPKAAjsXLsPPz53363cXZ7hpeUbuDzBKJGtQqhA9W/+fturpWAUjEaxW1eG814Cg==","shasum":"7b36acb84878a9574d5abdbcb0e42d42d890448a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.58b73343.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThSCRA9TVsSAnZWagAAUioP/Rlr18fpxTJ8wuHEUG7Y\nR1bnYoijFM8+S/Iqp4MwYW6MVD+Lx3L1646KGnOEq7p6D1IxCvTp0PUrrWF7\nVg/zXe/yyxQB+1eie9dJFv75mIS1p4yfaZi3EqiacIRIwkZmlg7GxsWrMJlZ\nlIpAc2HlXcTLLXne+gHBCXcZ3VFy5xIUAzA1V9Ih5ubZoXZ7ZHLGUL3kCFNX\nI/LNbqSR5nVceijt/EdeeQjB2fEFbx8qkUVT3vx4F55YpcQZO1XaaM0Ari7N\nqa6VW2ljQx+tPB0vFlj+tc7YeSfClUBr4+Zf137mI+inhFrToDVnSY//V3KX\nO0f1zoQjTMlZwJUcQdkb7wdSYPRz9nUXG910Pcn83+x8qG8qVaVjArkryBGr\nU3GltFkaREV9N5zKLwS4H3qHi7hfN8yAhntlj3bylSFjMH0qlRJ+paxeXqYd\n/CzeQnEcVDDt+7H23r5jlv11a8kFjn3QOw6nU5xej/Y7U0LWjGmQPx0YoqEs\ncc7PywkB1z0BysZCOAPhyehExlEkApFTY1wdLSW4YWEKYX7ptZUxQ87h8q0O\nmhxQNetujdD9fzAh0lU21kH0Wc7spOgvT1QqQr4cLegIR8P6m8iI6U812/mq\ng/XRHDHfJfsy8rDeRDXoJjkPH2m7xnmTZNOC3k21N/nf0lt2i2PC6iIwtx/x\npRBv\r\n=0ubt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL7KN2R9hUBkOBs2nKlWymkL3m7/clFp+vn5Ucin5v9QIgPGIbxA1aGVQt92zZyUXFxcbNwRjWi/vTIJso8T0NNTE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.58b73343.0_1592342610158_0.39659065517572056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.f155c058.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/snackbar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RQcJV67WDoGYxr2KO93JdNHcOrcpubw0360Ds4LuFYHNeBJydRFXg/+nk/AZcFRNQj+SVR/vMFDCfCPVV6FbLQ==","shasum":"aefd227440293b5c206483dbf317c9b0596ee21a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.f155c058.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe661sCRA9TVsSAnZWagAAhOEP/0bu6QB5/IwKSTIIfv8a\nMRI+4okjUL1Hke4EILZokzoUiN4kjFdrpt548zfSOBP8no/BZHkVu2czwarh\nqPVaraTwgLyh7s6YQTtz4aZTePG1+SQyfGn+lGjCRDIccswqDuwdVCvyBRq6\nKNVTY6jyUoQEAml+S/YbXfCrQuBSORqoMnZ5Txqwxs2sef0rCZnhYCJfE8LT\nYnwY5jBIUJ6CtQhpdS0TuKrVDSJEZvBTDovYPa47PpTec0FLAlnMxmWyz395\np8/KDAGdvyX4N96HrfeH9H2SbvqJtdRS6+SQ0m3rW28N93rZxg8RDkzNlKi0\n8PZJOFa9lmT0XLM3wMtcmnCDnME7I+5WyduHFnpNVy8SR0MSh28tRHy9xHZZ\nU67fHlM7ktbhvpCfYxD96W9f6oLiWwngaNDe1oWO5mufbmMJ3iBOj2LqW8hu\n8p/tDC2d8Dp30RpfHYcIYK+fEZ5oqZ6GAQ2ZSATkCXM3tMpN2GR7rh578Y9s\nz2S7ICwPAOt7jGlgrHBjMf49/s8qolcFs3YWCUSIPadoOpZ8UZ1VAIXta7rX\n9SCQso4OjCe+C+bTXl2Mb2YLSb9HH3tL14dncMtwncplWjCAHcBD8ikad6kG\nYDhk8GhZoDrl7rEp1s0cYXxO1Av8O4m8wzaAEYQ/9uVeFzX1qCpeOfhY9+io\n2C87\r\n=ZA8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIPXjc8GsrwAl24JktURC12tIRl8V6JW9QzK3iQXtMDAiEA3khPEumAQZgHFr6336k3SmFDDPF2lM2Wzl2YWcTuoOE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.f155c058.0_1592503660157_0.048037593024006675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.309779d2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/snackbar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JNpbfCpFeA8Xe70s0UnwkSHJ0Xo48wmG53KeHL22d2Y/52SV73hZYeu1P25aooze6ZndBqB6EG3ufkJa2m69Zw==","shasum":"5e7daf27b6c3d5c23f47f91d12a2803ccb2269d5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.309779d2.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+fCRA9TVsSAnZWagAA+54P/38nWUti0jYnSzPkisyF\nHiyEj+B2u3Qq08CMPikvDVT1wwOngT4FU8Z+5Di8nGOOAKA091e60myurXQh\n5HBF4+uXDq1Seww+nAuNyM+Edwb9cDcANH8Qt9NIXXg2T/ErVsAFHzqcNgHM\n+x5SuPOaS72tXUYUF/O8x7d57gicOZXQjQkG76hXHjA52tPd1lbwAkAkscZJ\n5wIMpNjVJja9YFQq/AzrC7I3p2pQhOYm4PZ/pDkt8hi2cOJ9fxvT1CnLNi/N\np5jjhXa6Yg3NB9vaRMo0PWFMBQW8oluGSMFFSDk7DRMkY2D7LG4HEd7JKRRb\nREGSO2wbqUwHQ11KaKy6rkxNHx5/pahvhCehAERzrk2WEalaUOv7ryZWdfAN\nvqElOYvzbGb2IXNehIPqLO1SeNiS/7yrfGL0N6TQsrb4i42Q7M8gJp1B/9OH\n+zNSli2Zp5G08RU8UY8JhdAElpfc16kvqFATHg/2U2r9QrC0GBCjyerS5p5C\nOFld0Q0v0y0diGpSBcG3sv7MwDYdXKIVrAJpx3ym088ThNNb5taOxIRjn9qm\n0yONV40g3wz5f4X9F8G+fNF8++bBB8cl1f2Swg0s5oYIKP25mvaDSGCznOa5\nz/KBGvGCLfn4AdNnEBCeCyewjx09Oo6TdqoY6wQLqTgafvt2LBRREgxxY45r\nfxx1\r\n=1dep\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhcDOM0ILhEaf/2PUOf3X2rR8Ik5NrzBk0nGQtMen87AIhAKaQWP1LEgrmrtPK2zqxvOIqpAeiKhC7RC0+CpbCeXTt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.309779d2.0_1592524703112_0.2592478995337113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.e7649968.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/snackbar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-z3FpiQFEGAbeMeKNQ8C1NhCHcGh2iSwmYlhaR5AwZpBHZr+wYq4DshJuaKFJsLh3tS+n9c+0TnTonwKXpTMlfQ==","shasum":"c8d7da95c958d4cbdc5496d2eab944891e6a65aa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.e7649968.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDRCRA9TVsSAnZWagAA5CkP/1JLnKPsNHQNnVHy0ql2\nS1U/TRMd7ZAHg00z0qOXlNWsBMYOk2270iYeqs0B5AiuCCbTj1gyBo9w9/y5\nEhYoyjMeCCn7eplE79WUblZyC6sm2847el3/uHk5edlaHnpgW9WdvlWMKRKa\npsEcvAF8HonstKv3+0BWqv6iuY9OQK2ZQUVa5GN1hImsCE5/s24m2VB5IVmq\nQ3hvzUjH7rjPXaW/iekNrInImwlqL4C/lW1plgJiF8V0I0xuye1eSYN75min\nfcr/BofFAwGAT7mKYAU74vW/IdH4AuvZIZEtwFZ8B4bsSp/JAJ18NDeuQsPN\n9NS6Zpz9xBgGlLTMVqOVQ9LZJ/r4d/bUBSWU8N3tbC2EPcspl+IABYpkSsrU\nuFeH7GxJsOxosykF1wvU/EbEgOKgQbjFqk3rUv4BmisxNdfn51ebRYctloX/\n4cW9sec3+D14bYUbwN0M2+Q6LfLLf2xKp5WTf/uoOEyqqHCGzuqvLxsG/1+O\nPsOBj1gIfrc82r48xLitO3C0muzp02bYHxIZcJK0uLopEXCZeSpvEqLeX6T7\nUt1MYOkVBv++pDjgkZysAQ3ApVlyS0KV/g8qaqncIlgg/f0+sdpdAAyE94Dc\nut84yawkjRijPP0waUIYO7U4TlMGpXYhHoJVnLYdejhxQj0E2DtyCIflyI7t\nWLGH\r\n=zR5J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFf4GISBTvArsE4SA/FA/C5ChOnZDhodC/Bh1VGr17VtAiBum+lJoPYwM6qm6Auky2SZMZ+jTfEUSwcPVfiD8xmU+g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.e7649968.0_1592602833581_0.4380116906524598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.8e21c78b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/snackbar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5Rg1QI2D22BLLRsmxbyF0YDZePC7EmL73xEyx8ddRnSRy6sgRuJfRsU2ICLW3I4Ch5F4sqYy9V1M/WdQ6lNI5A==","shasum":"01db36720b375b9c77cd5404a0ccf2fc8150963e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.8e21c78b.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8InrCRA9TVsSAnZWagAAwVoP/29TkDUlKVjk7xeHoU0g\njX6kES/C3SiQtRhtoeRFCcr2RKmTbLtpwkVBxYDiUGaCIoSQa6R0m1roQi3t\nbbUsK3Shh8WVMojHf0/qFts6owgESg7p7xoA8caHD1ckeEWQxCIdxLkvOpDH\n3VqjRZKHeXw2JSceus95H5w5JQJ5GGwpYCB+vqyO13x6ncelnAMe2qh1qLKR\nw1YHdMSyb6b2Ii3k226FAhfhQx7OIPoD8ICEUF/1aUtoe59Sg5zBaPfeUTfM\nBNVHzXo5f+OhFODY3Mqw30+ZEILUkYjwmao+0pINTw0b69Cs7gw8eK6WZIjQ\nk/tDeAfLF+PF9EGezYUa7HWzmYazxjc9X0eFOzEctue2UPBY7uUcqrSHekTZ\naSs3yoletwQhYLOEdH4qh7RC0xugmHmMS08pqg7QTyyQQuoBMtqZFnX0GQUs\n3Tjt9bYUpCgOVMcoluAj7YWH/sh0WA36VBCzhCQfaiIdKBwGE9MIxcp+6BjY\ndUxJVDMtf/7T5iNxa7jRQ5SGqqhP/oLGUdb26V4vbhObcZGQmSt2lC4n/ib7\n5lvUWJQTG3aBtsBp1Bg9Y856dIsILKfQzghgYcXo7wDf0hhjD79fP+KEDfhG\nNa3KgLaq9oJ5S5RtANs5GgfIb0zcW2DqrIFgJPEgxYrz+w3sTFkntqOWRT/m\nsEhH\r\n=DY32\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlIscIMnrFeic82Z3jyQJG4YmbrreMrUiy8d+GEqEf0AiB/Xq+fPTV/H1GcCOTDA/7MgprQ8/PqbCCsp16WhsZ0Ew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.8e21c78b.0_1592822251231_0.50295001786985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.6db76faf.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/snackbar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ekwDiWiE9bgKsIxB13cgWXeBlGH6QV4n2GOBmCvxpOFhJQixM4vOnJEEXg+gbH21w9NYtTLohuybX0ucUBXQHQ==","shasum":"aef0a749df73e7bfffa4e4255fd8ec8094b1b4d0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.6db76faf.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7ACRA9TVsSAnZWagAAhkcP/jyisoYJzDCkhCZsBV6Q\n/WdnRxked7QiC6FFTuw+2ONoKy776A+ahidgDSCoEesr+rbcBISe/jL25zJq\n3IvOqnv4NLVAHSOj3g9xjTiFplwfQgbRZEFkHsE2AvFgEHvcsaYEZu6+NFlq\nHoEFIerQkj0gEWE2Dliazpc5qwJ1X9MCLZsKbkaOv0goyyve9FPPmsGBqG6B\n43br/U8La/WsiNw1H6/8kdXluzWuLv1uK5593BIxLOBPEhp9DxttNBTp0nE0\nxbc7iLDcOWE9R72yj46DEVCntQg3Pr2EormbuRsr2mGG/E+QpaNGqczWG40g\noyKVW/uBa1GDo9sG87tWVR76j3+ov1qXE/SzBVQZlElSj0Vd0K95fvNIr42t\n3LQT8xownQEP1RMpvrurROvgNW95b50BP9fFqRjnXhQLvBbtjOIvgXS3ZmSj\np31nFj90bQGoQhZyDChH1skq+EV352K06xTK2RecvIW3Xqwc0xHMpzGoz3hc\nYAGz9OSHFjlbISRxjQt6MABVioOHnVmtp6PNL1+nLN6wldO7sCn959oAuoAq\nOTnB1M/otG7bcn+u8JHMKWJFejj9ucBZeuFvUqz5Qfsw57acshY75eEzKuGP\nn9FGgAdQLdP79VIR4D7yCwEeadduJmEr1ae/AqGJnop+ZPI/E3AchpPhxUDF\nHs31\r\n=6VI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcaK3AVAtDzgB84mOgFsjv3zaMOWS8rsa35axVny0qvAiEAuOwaZLC1GvfafGn5ET8WtXPPO7F/qhVkELkHfcgoLL8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.6db76faf.0_1592860351781_0.8251457415701329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.c4dd9684.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/snackbar":"=7.0.0-canary.f2a488e95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tymzb6ZiMqaRXWYGXnZgmuXj4OhZpHvo41rogR+uajNNljYez6QCHYmJ8VhQa5SDIqTDeivpT0gLkySkPgGWyA==","shasum":"388f0c6ad1fe3402863fae3669cac0ea20627e89","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.c4dd9684.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxnCRA9TVsSAnZWagAAmv4QAI2v3BPaX3rYdaEL4RpR\nt3qGEY2pQ/shSNiickASDQTkmkXBaqfPwqxSI6YgZk2IdMWIFlPqWVGQtzVC\npjkI9VaklVAbwjczfEP0pD9WDzNmK9b+Xly5gcUV4T9XdLQo1VeSVtRXWx4M\nika4hJ5Fes+8VA260J6RTKM3n8N+V4OSnZfafcRGjWWAP25gkQO5zWHO8obQ\nlCUJM2ajnkrOQJQPFukkeA5IX69s28qIAvXgMT0pbPi68h/g9fTnUlab6vFK\nvUvU68ue57pGXmhS9FhI8jWDou29ZPnZ+P69YXALcxX9LljFa5witKBToxsi\n1cJezlEt7NJO/neXdB/zZqoukUJZLSMoc/jU6l950DPThym44nQ586K2u+SY\n1qD4VUnC+GpYfvKr9BSob/CgIfCu6PNpr9FYS//QFE7NYToeRqvAP91xmAAg\n39tU2m9OqEIASX3M4yhPhF6VYko1oI9mo4pdZS7HheawRvBh56Yu79t4KpTa\n0owwBW2M5iIUcpVYC7oARpopAoAwR7WuPDCWpLwMXvSnWUCMzNc690+q07Xm\nZtJ/bAdq2gXqv2L0E5js61k8FDLfwIccLc4XT2UuzH+hMSwk7wEurh5cae9C\nzaD5A1GgBhnXmzWu8AIjuUFa6AcLDitT7q+Fqai/zIfkUGCie9/+kIob5bEp\nnVID\r\n=Lzp8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXCQBOQAJp+rIsOGw4LK4Pmj9Ht4Wk9VhFKh+QnctEyAiEAh4ajHam7C+bDsH3i+Ljl9ZYYXzlF0OR0+GxjXuJnNqc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.c4dd9684.0_1592925286970_0.7456104670333386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.b3e53981.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/snackbar":"=8.0.0-canary.15e81fe98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.15e81fe98.0","@material/rtl":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TRCkbqYvXXZ5ip6JYZ6VSNvW1rFzHy7/brxD1Ur85RkPWnsJy6kupwTX4KVUNax8/hylbpYGKp6YCnacAdzdkQ==","shasum":"76fa4e6f3366df343ff362bdae2f0c2d86bcdcb2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.b3e53981.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCgCRA9TVsSAnZWagAAJxkP/RMzq6oonZjgLg0rpnvv\nmwpbmPPmt3p0ZII177daPwq8fpV/Q0alHAWftdBZB4J2fKnVZWa511CKeEkk\nmwQ44Xe0X+7hEA1JeI173/JwZQVVaQ+GDgo75sanlcmRDU55Vy+vUa8ljpVL\ndQ95Zldv2dHy8Wy5k6jypccWDjI4eXJiSvWSrkqUWvctG1TqOb0xDc9SJPxw\na6bsPk3s3FagdR8v8pXPB5/R4NIWrM3qqR+obryj2E8lh25Hlj6djbtxGM8f\nhjFsLY4wPNc5anRqi2zBZuWdrhsEXMuwYPdf2wBjTzNwB/8ZJiQ+ZIizYaHJ\nu/d6y9iTydJVgzLAn867gDU4SvRbYfZjFgAu5+4Dve9++Q4KUPMi0Sakk0Xw\nihFiMd7xlezZHQnJOfrbCA7o0B3DU9ghU6HOR5IJHNsgA/z5XibdUF47l39s\nD9kBkXuQ76U0HTAAufKjcKU+md8loS4tM/4Oand9txQYuZp39aLINMz/d1jl\nQZykb4NtPbpowLy9H7p0XErxms3qZ7I5qGWyDEyB9aqvZ9Qbebdgy5o713ei\nd7Tz1mw+nDD6RrlhUS+EJQiRuHtKFZ0Rgknf1xYV5idKpM6NvWhcXe4zCElS\nRD4e7VJx1WMUKNdIWqf6TY8Sm6aYlEj6DjTaU1dEOw6uJ5Qr6ViTc1ezVdVw\nNSe0\r\n=Zlbo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQcz10revNxsdfU2HRFETbIcvVVYs/LJzb/AEhEmX9qQIhAKLHJpoA/FRZiBoFnpA0b+oA0R6M8gQ93Kl5JGXFCkud"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.b3e53981.0_1592959136154_0.8115965752974219"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.b9468f77.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/snackbar":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qCEySDpcobUHwwU4zsvTtOEneBalkQKreII7tQ0fw3GVd5aF6T7K+iBPTcQJfuwJZ35qU5f+VYfjdAVwaqXx6w==","shasum":"2f83136c38ce414e35966550cfeac6f0620ba0c1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.b9468f77.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uBCRA9TVsSAnZWagAAxwkQAJ0I0Nx1aHyZ73DkoqSl\nlMuQopcESPjCaFwMEE3uiGNwiZ7oJO9O/SCApw+o9NMJItUnLgJbkA+PWpOa\nbKIsmP3uq27YeONuaZVdxPdFsK6P4CT8qwDAz0VM4ABFIo4bzcSXbleh/nKP\nWCSgB68FAHE1WnhQifJtHj9T+Wy2GjhcEp54+VumzyyCPcYYigH2eIZ4nqDQ\nT6jSbRql9OZyaSReyRm1mitzUzMDYjcgJjnUcc8tLq8VQa6DwOpEFt6+jzWk\njJfUJPrjhIizL7czBZZBWA+3J3vKyXSgTfU4ANDTZjbo0ANkYkbsKh2r64T0\nWbZaMfbGlfr5Wbf2CMt9R0ubTZNRr0BpmIgO0FW/zsEkgrmvp/wnvGkJoteJ\ndcMWvLVU01TqksdfsY/jW5aGZ6uPmRdz+bDYA2Wvf74HalxmkBsW6lBgcoIY\nbvSj2EwkjPT62ZSl6wbHGGZGk8BprlTHFl/glHx8NmXGtnBzKWwTQ08ML2VR\nOovS3OSIpEenw10YqogTNCM4eD3jxHRZa0YRNyyixNAO6gGVQECBVxZY3x+7\n1nILwpbOPJ9IFkRNM6119inz84x0NIgJ5z8+DqbNhkcEQv/jgy+OKRBhZk0g\nS4sHXyxZo7q+pEKCBh1kxFeJMe5KBj3BxXl/jbLj/7uDTwzbhUdgcJ2UBGkE\nrpQr\r\n=1OhE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd+G+FMW64FMff5MQ/8w+TxiDXeiYCJUoFSi607RWsewIgZpcXt/Chmm6Nxj2NoXJVhBgkf4hkLDAElfM+8xfATU0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.b9468f77.0_1593035649403_0.26243174198073627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.eb790e49.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/snackbar":"=8.0.0-canary.599b8c319.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nRPg369dU8z0Aboy4VkmnrwfQ8IzRYaQUxSf3oM8E3YLVvgu2Zw23XjsshbdSzm/wQ6fEcaE5sNFDvhRWf+Grw==","shasum":"1b5ab1ef7ff2b1d43081a633ab5d1047207d518b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.eb790e49.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RS1CRA9TVsSAnZWagAAPL8P/2vq3weRwL/oecJx9FrP\n/kUArYKK+WQ4mWgo1nhHjlM/8G4EF/T0SmBD0vRAMPaqBs3GEvygaiJah0eS\ng828tBgU1egnJI0egNaEUwBBbqr37mKi2ub8eOQbVQWKZwdtQ2QtpGRnDxkk\nL0SIKb/FFVKaG3GIvLhoHoK/icjYmTjs/9kqPQfBk9LbRYwrxewBkqK/3toj\nXlBK4G6k1UNnjXrQAch3WLd3DYaT5oY9aBUexVN2Ze7QD4iCiTimzridE9N3\nc7wcmMIFwP6+DUaoSdv/+gJ1OX1gfqtp6Y/d4MckTJD2BAi+E7SeEOVQQ7Mm\nVMP9LLfrJyNLwortG9GOI4PlgpVU6+z7eXymyj0tkScQkRUJmG4u57XuyG/X\nnxLIefeKG5SoWYd0+Xsz4+UBygSRY7qTuT7/hrfVCZ1DXjrVV2EkG3cyltUW\n71L/54Z9rTyPXxB2zH4pGa9yHSnbfEAINtZQJNdsxLbsfyCvErN+Bv8LCXf6\nI8IgQF1xmbQonZAJVZxwhgYMCLqQduGAzWPmBZ1iLGSkGWiDcKfbkQK96BC/\nXvL+S2ZnECSM9fmj+fLp65o6/vX012Lm2kqpBe2btesU0jIeO47x6gtIrX7Y\nHCBqXUnhJn0bqUpIy+nJyIVONnU9d2Ya3D9hAbZ0uH4K/k1uSY1PU1Hd/Bjl\n8gnq\r\n=wii2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpmaFYbOFOXnr0hrnRDg5SuuBkiZywip9HOpQujFnoBwIgHhH4UIhNWE834DfyBMS8fdiJyZ7bOuNUnRb760LYCUU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.eb790e49.0_1593119924849_0.3572796175176449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/snackbar":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fbKpW4E6iirD6Xdgw0Hz2w1/1oYdYMpyhoGwY1Z0po6jr/Pv/Laipj/wEn0ZTISlk59q36NdaMWhBkPfHpJ3Jw==","shasum":"bd9981fe6f196e6e9dbdbdd27251c7fa57c7851d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iq8CRA9TVsSAnZWagAAzw0P/3WRQ5FeQNCFuoTVReKI\n63kwjMM7TIrV4nBfnNHxXX2H+00h5LxJLO3JckMWNno29HS6NgmTMEye0oJz\nTMbZmRib+vG+3vWa/jmZwYS1bLwS2PsqRHrNm4lqMKFZHATQN6YsKJqUwzgD\nUW5U4iC1yuyPZgjh22kQpYoes/bIWuRCIRwWMKqodFjHv9rDqwZfgMrk57hh\nf1pzzBYK1QsMD8XC2swHdS+32r3LCZP+kGDDbMk4l3vnelZAqqcujMmdNm8s\nX9gswypgo2vzeRW/wq2AUwwDI/EGXvr7JK7pRQJHG4giS1SNknPDbngumdxO\nO0h+lBY9q/6nU79rB/c4q+JsDOlZ7Hxmm8tLuVDRknLAFSK768o1DyEsCm0s\nlzh5zUgaiqghjhZ2Clw0VYOSICR+T7tRsRzUV1UURqZHRvROCjpUrp/H9MRM\ngTrAkBdQvxKBi0P2WtI3RPjg+kAiuvD4VY0DVfz6mdA+4E27E+4pNglnSsH5\naKpb7X2VsvbgJwpBZDHNXmJk9FF9Dvh5xogdlWC0UABqrD6c5AFaknUVy2Aq\nbzb+9STBAEa+gtzQ1CZGfWQ/GBuoKLARQTP4sKKv5Q8WiZ0zF3vCxmExuZFu\n9BkxLlJtRaKshtNCeaTVZejKprZL7o3zdiEBQCwl8Qj9ObTrx1Ecq/rmg0gw\nfQBB\r\n=8Vxs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkrAxo0qgIXIqKcIypEOimICwMOWJ6jTl1p4GJ8CkHegIgZrNgk6jj1MkjNI1iINOE/9n6Y/WzfQ3c7zywOlO2t80="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.9aa1a5c5.0_1593191099818_0.11858802218540276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.d36e9861.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/snackbar":"=8.0.0-canary.38197b443.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3FRQUbHXfNzpOjej2A1Pyxj9CQQTWZ5+qFNb6WaY74vP6sWP9zZCvltOqwkgc64c0Cg0ifZvarnF6uUaQOE3vg==","shasum":"87144acbc0bd49efb791871d6d846f710aa7a1e6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.d36e9861.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIJCRA9TVsSAnZWagAAtv8P+gIB3fgCoaGtxt92o2cA\nbX7Vf1QLhRl4YVUhEqvK8I3L887+Wm0U635BZXAoGihy4TU0WSS0IXS8GM7o\nl3LhYyVMLHdSpHFB9Omde7cg7tx0/CzdZcnjiSteClZkBCU6vlmFG3mZlGpb\nnw/p3FWJl2qds9f28cqSuDFUln6i6pE4hV1c4kuDfp9+bSD33wllRMlw/rT9\n2d6q4fb7Qb48ViRVwftrADZ6PJdj06A9eRe76ZBJcl4isJqtl4qwMpzKQAN+\ncfcx5Z06gps8Us85rC9Bjr2Js5eZuO4p7VkCRM3muq3aQGexf5AQDfiX4IWZ\nb4BtA4cVPHsHvo3b9kdT550oAqFclfVFVOXjtdegQCJT/tEa3C2ApzmSO9MA\nSL0ancp+zMzyP8WsoXvvYQPiM1nCrqJeLnJ7OzKCIXdLBNCaqeuibxklqBCy\nMCWwOjgI/oE2DgQMocWgNbKUqDgVGV+EQOUevGpa4nSbS0YIR3nPv10CgBzx\ntsLmsluvv/kue5b9NN9OJN+287TSb6nmBVR5PuHdT3qTTNoRKDMjnbCY+u6s\n5BuF7QPRZW+xYEY4LLiKKvPSkoohpI86km9Q7tKBiYA89gP0KuDR76+gocRF\nQs7UjmXn1cEDqqJp4A28WkEGSUE0uEBeVYu2qGt8FUSESiR8+9wgDbxp+p67\nWjch\r\n=Ypk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmuX5ZX6cltAa4WslXJCr2uGZDf7EO2xNfIF9LXDnZ6AiBT0ewx0P9JbY0YfiBNCr6rjCxR1DRVN59Tb38m9XxZqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.16.0-canary.d36e9861.0_1593192969612_0.4035118746206079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.155c2f85.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/snackbar":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FEjgNelwtlgcp1Q352cRZGOQcWI+L1Q2Ru4CXdUJNytN0jHN/vcPvDYcsLHgx+jQ/8Tj+lgmYWn87TihAAGvRA==","shasum":"b1ecd0d5ab3c0404c8ca52d6fcee66b34450c850","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.155c2f85.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oTCCRA9TVsSAnZWagAANpQP/j+xew+E8hEJSIbAH10H\nhgKKrpRIeo7zRp1KljWNKnLWF5TJeBVV2zceA2eBb/GgSF/D0jH6lw3iBxhW\nZ9xEb+BQDAnMcEUFxfvSigzM9r4/ldIvT5BxdvpmusNutEIteQvhN3OWQ7vC\n37G7vRzSetuXs/JT0DlCl/eyoI/RNf+SJIx37FDUZIvoTL8rO8++EGFBvU18\n4bg4yGdXkpWgim5AvvFp+fAPScjyom14zlOoEBhHs/osUPDro4qMxvgPFunB\nEpTNEOYv0CAR/V2Tlm+Rxs7VTUv5SOhPDEtJC7953psoJBA9qrjcFNQySJpG\nfJ8Lr3L8wmsCJIZMeJcl5LLRz3cVgbGpX52y1awvqCmQvr1/BgqZDQd779Ng\nJ86p94Cu+ZpUPODNYJ6Cj+aIDN6IGlWthWFx/aAxMSTOVEUMLzQJCVfeiu6+\nU16d6cHhMUsP1hDIuInIsARIxUGIKktFtJ1dlwPPlTTh4rYKIJjwJZMmkjlt\n9t11aIHDju28sm7dbm1JZVZ9R0CiF3b/4oJwYqxNcML7Hm2qnyL56Simzzzz\nsCl4NpBoN22HXs4wgwSeX7jgRN/2t97w5MrC16pqGR+utdU1/BOz22CrQdvs\n8pdEeU3MfW8Xu2EFEoEYDzy4AKfsaq5fJQXA4tSS27kT5R+LIifvzi6IRUub\nl+YA\r\n=v9uV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVIBX5eNm87GgYY4pDqYP5mbDSPvtYqmY/L2AjNEATbgIhAIp2QBpuCc+tAcqX8ZvcVQCSFtJbTUNnR7HiGKKhzr9m"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.16.0-canary.155c2f85.0_1593214145536_0.4449302634399328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.340c9c40.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/snackbar":"=8.0.0-canary.df7154fb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-DRn8ovdQy7ufF+88SS5p79EoLAcrthXiNm4u5p9cSsM/Vtg8+bWaArCbBmcTj8oxlInJboWCJRbGDj5/3quAVw==","shasum":"9a2cb901125eade2a18fad3a9d9a92f1a0c26ee4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.340c9c40.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obbCRA9TVsSAnZWagAABpYP+weltwbnDkI5limPdcKM\na8FbkBfTk5TERAucIEFRRQzBatPHlUl02PL7gynY0GI3Nqhk/kUlSb7iccfB\nkZV9ppDYUa2PpTbkayF+1ot+yt907Q8DCsXKPJFyTMhED5r5jdM1fT5LVlAj\ntmKuEYIvkDUO3FLnUA/Cj14WcGzv61oiPqwcIZeXyELKqWL28L98zimNoLFl\nX9ppuzhrs+Uf7j0nDC9O/aInwdGXEwvs/ojmcQunaMd9c4FBSWCd3hGThR6C\ntKwDoLFU1XpP2yhjHTdFNciQdYRcsGPTMzbd8jrF0BxoT6UEMCrnPIWaEqgt\naQH1G2fSibhZmJ9lU9ZrdlWID++IdDM04UImJ08JFhtI2emgwDyPhZhjj2Hd\n1fV7eXDNcIu23VtDTQsyD5LidyM0X+Ex1FLsPLmWgNgKfYlKuShXEfggwzO+\n9y7Pp+tU1LK5SIlMOGf8jLN9JVCXUlSpzS/6p6jiVOcerys6k9KQ9eXGsIh1\nt62ggJjx03e2O9PAgVIQJd8xCcFCPmvBcIFa25Nqau41AdmbNF+LxNOnftlM\nEaOx0+yT7mwJHXVxsbYGL1h38kl4sZnBVLXarWBPdSBPcZSScFA4Fiwo+b7F\nv/Ahc0wX5W72JMA406aknGjM1Vd5Yz6rjr2tr8DZYb2I4B488EQFv4I48cnj\nmv37\r\n=Xaqf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSI9pXlptvxSGMJ3z5/xqw0dxUxli/ESfDV+Zy6py7EAIhAMNUHwqLOb1jb8oCkui378Vcei9et+S4SGxh3LAuWVb2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.16.0-canary.340c9c40.0_1593214683131_0.11710783382186651"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-snackbar","version":"0.16.0-canary.a3384d2d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/snackbar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ogjGr5By7zsS8wJFKPzJllEwfU4IzDdPlD0Zw8i75Tn563P7UTrCPw2aw9iIeFHFZaW0sBOT2xdQ0Y+82CNGIQ==","shasum":"0694a983e63dde61f33bce6f867b68d1a2a22be3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.0-canary.a3384d2d.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6faCRA9TVsSAnZWagAA94IQAIgU+6EOIN1Ab8uNBSXv\nALmTi7/8DTZ4Ib9QmLgXkHiWTYzIk/BeHVNiNngTwGoeTXcsOd7GdeMG3y2d\nburiEObsH3kmZU2byv/q9Wll2RM6msMRr1iQahg0ma9uoPbFjAnBpYMUy7MG\nvekrvqPZSdvok13Wqp2bKc1TL6RFcaJ0Skbk/JTm0VMBTvqhfS656Y/lqWJC\nTZgq5+YzscrlQeDqMiNjD+HKIsi5bq7F18MuBe+YX+YSgr/hJ3ZnA+Ajpthf\nKMKS9RH6w8glVZim7vSeOWHKSDaPLHIEcM9gEDo4xEpL3YgIGROpZpJTNw6o\n7N1LfXBQNntaW0DrkEhzA4g65LQB8ACc6YS5PfY6py22f35Et/pnDlUYdwDX\nexmzKBl1x57nAnAc4KcRvZKYLthYmObmATClj5FjehzB1kPtf43oGwD75wbk\nXwlNEA3PBtTWoT4KjxbEbUu6dXSTrc8War45y3oILUZxlyMdg1TH3vPIsU2Z\nTCaozMr4hXc6Jv8CoGkeaBqiJOaU2vQfqK6MnENt86qVjS+6PdE75+QzfVJ2\nD/swlCBZfCZ2PuaZI5KxeWIEUrbemNsGqmFRBi6vECClUSfAIycKbxfVAXYU\nwU+hkU63lYNR+/MHx/pp0g4YbTrxxUsgaCL3g7NWyYiupDHCQFgr95tx7weZ\nEUsJ\r\n=HvC6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8ZXBkNfxoncbSPGWpvA3GIAbH5hkbQYqKfrn9fEqn9gIgfOkvDSST9sLAULk80TWQTE0pPWjbBj/QNEm5Bh4wlGI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.16.0-canary.a3384d2d.0_1593550809962_0.8395634407426678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-snackbar","version":"0.17.0-canary.6d056c96.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/snackbar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fY1XzFgOS5JC10NvXMtZp7viJdbkMtiPnuyos45DqkZ1ruUV1IXsDZ0zQfIRuCkHd1iA3pifOFbTy53jtMbbtg==","shasum":"982ed72701cf8105f2f4e4e7978107b8db72750d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.17.0-canary.6d056c96.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oSCRA9TVsSAnZWagAAZo4QAJYtXIf4WCqfqQYJnoN7\nNoxRbchhSll3aFsSfp1oXodAf8UhC7l8tcVFDpGk275vA3p7+TWr3fvalOxg\ne/gbylMUxl5O3E2lVWPz/EnfVJSLdjYU8QzSkZsyZoKkSerKOu8d8gwcK1ri\nAY9Y6ZprssThw90zHMzEysEff6fZ5D/8yEZJSKeFj81Da6rmLCnHm7KT9i4n\nF0UCIZ1t08+Od6/qpeISE+li6EP4/OeH04Vf1a1vZ1R7ep4sp3BEPkcLcrWh\noMV6vJZhTplcIG0jJBQEdRUSALej8k4eqUmcG50ugL6oz1KKje9piJ+eEBEz\nR29bjXrXGR7aaHt1U12I7hXPzluGXP0poBI1e7V1XUd471BNm7Az1aFc5euF\nCJpBzqrzosYX2rzGTwtLAamLnkDD+/qdfi9Fnsr82NoZ0kfhj8ap7QH0v1LG\nlgvkyrcxP6g08bXvvT9OIQ6/Fi3WAxCUJFp3cIlrXBy9t2rpdjl0IukZvSFP\nglTbFyiexChEnHQmGOlw0zRFUdW51cC+m6PTZBEj3Fb/AWOZTrxpFKSB8NVi\nvT/3BouB4g6jggaq3gmTUJrRR8FSCW1Hf0TVmuSwjQ0dOR838vSG/C4RLEgF\ni6JDjlWuWKPHyzirJ0lAtAjueKhUIpU5sfL8rmd2zHWKfNwji9+5iPsfEq2m\nzvY3\r\n=k/cs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTfzyInv4s6jR8UI3C0Mji69YbFF5XYYE+98wMah/jPQIhANKQh6h2416pebtoHvsh0IpuVT4ov+CZ+RsP87mVCsK5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.17.0-canary.6d056c96.0_1593551377647_0.97775896074217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-snackbar","version":"0.16.1","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/snackbar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=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-snackbar@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-TFIPUo5sq+iFCya3ES+siW3D12Mx/U1r3lhsRi8phkQdXPaObRl1gNq5ttIqDQHKsJql9VNaHPwIiV3qBvhXnw==","shasum":"f65f12d195f08c8b42bc6be55238bc9f72dd2d4d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.16.1.tgz","fileCount":20,"unpackedSize":83066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tBCRA9TVsSAnZWagAAYFcQAIea9pYLSCa8eBYPUwUz\nbBYC+KGmrkncH1UBiSJo3lBxx1p24wsH+kzrll5uQJYKJc4wLz3pYOPfJ+RV\nlBsH2hLzV3N2IBH8K5cYSYPDJe/zAQ0wSfT54bIyPYHcr1ReFkZ9Xbwe0wud\nmqn6U+0QCg8q5Ql1i8PPx75edFl4q/Rv0rEWp9Rrf/kO75kJcVJ+/WDvb06g\nlc4pSiU4riLDXtcJChHQoxbfOdYDVbve3oNfIQfTEKba29ujgPLVUlYYbbg4\nLwFx25FQXQiNjuUZCx4bB+xAfK96I0qqR0Uzk09ext0M62k+qWFQHVqBzFvo\nyDLqV0C1K3CdA4B6Gz2TFFiy730J+s347D5A8GnGYoC2Xdm5/s8Q+TRE2pJ0\nFwGM9/Jr9Nwx9X7HVrlAnyHWEudDy6GQdpxiXSJ8GbDpD33fCn7TUbZJk92P\n0Sva8Nza+wUP86e53m5sh+Zcmf75IYo1T0IXw8gxVe4JKOYBFHYrc5FfrfyQ\nJd7CFQSz/q3qz9aTM6zgmURsdcL9AovwbWSea3qMcptBv72oKUEJdNnh9XQJ\nqm081wM5FuZLiGkOkkye9j/niDpjDaSbxVUcA+X2JpVT+Mx02v29ZaTfI2Qr\nWuxLK59wJ9y2CXx+wiz5xvFc8r+M9enz/K/T0tZ7FOUEXuxwfjIfngOTW2o7\nwraN\r\n=97wk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvcTZ5sifDrAZbvjDiQ96XuawCVIa6Dw2ZY6lSZ5+OMAIhAO77nM1TOgRPSWanq8bRJN0qZIFzIjgMv0MzChmj+kRW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.16.1_1593551680791_0.13452175345416229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-snackbar","version":"0.17.0-canary.f7e37607.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/snackbar":"=8.0.0-canary.c678a9d34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-U4pGZFuz3ljveyu3Z9JMzYcX1WIt249xOk2n1m2i4R/AQ3fd7qDtvyAt7H+ek4nMuYWfzP+9/hcGkXxAR6TCpw==","shasum":"8e448a60b5b5c0e986fe9424d7224b35e1f35951","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.17.0-canary.f7e37607.0.tgz","fileCount":20,"unpackedSize":83101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IfCRA9TVsSAnZWagAA+osQAIQADw6mNhgO4lG3vxow\nWRcM+4RSCxetCimGi1m6zKRxNI1AYN/zvtOG7FCDu3PjQiwgxCe6iogoJCow\n0HLoNrTUnm9e/d6NIAwEvhCe3vIM49vU4NnAQmjzzjGCOkaquwl3QnRYWsRh\ndfLXqjyY9YU4haQNUZDS1bzFot7ehq3j9x3ZElRPaAQ+dTC1yUPPBfLE63v6\ncA5qZpD/+4g/rMUpms/2bDJ6A1l9q6eZYip+07P7+RbT9SIr9vhySVyeRZPd\n0y3dZuU46PaaTtQSPhDDtnVhbdBUSMzKcRyTNgdVlwEc2b9i6YjN724JMT14\n+xybqOd9FZemyDZ67skZwMRhxL6FOG1AIYWcvD6El1W8jz2ZIV65zBETlBdb\nVg2ufUkGNpRjt2PaGJK8AmVOOsUPRN0/t+KCYvSMM3tkYwYz6rmf7bjmOaLw\nBY2pC7XzcSXVzObD+dn7NE3euoaTsR9WcNlcD383MBCdtPDeYrhNr0eazwyV\nLxnceI4MR83llOv6I2YNTHT5O7ufJyYsGkK55Xmxvc6Lx/qB1WBAWXsXBuZZ\nCH51Hw/zv5ZfSzaa8BIEO2cbp+lKkTm90ombTCKRSVo/YPBSeetFmOpH0Zkk\nR4KVye9CesRYHazyD8J11KDQQxSyjUXSAiB1hgrMQeviNqOCfjaqa2Bi74Gy\nEAFS\r\n=3FaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD99URFipmxb/mp6V0kQr7twPnGTNbkD6TgsRVuR75XawIgTiKj6kEolLntK5vArjE7FUVUz5x1+9s9ZYt1M1mOycQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.17.0-canary.f7e37607.0_1593553439031_0.5868981714897104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.0afbfef2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/snackbar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-iCHeup3WNQsJtRhtKhir9tQGhJANOCj+Bt1evctpP/NeTefScIt/yeCQxfqEAt7jOTQQqebo24a/OV7NzscRqA==","shasum":"b20805ed4abc823d8250026600307368c12893f9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.0afbfef2.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Od7CRA9TVsSAnZWagAAV/IP/ilhWoXJ93x+zcw8WQQN\nqbucaweHNzeWOAK1NFEJCJ6mra2q35aoitR3n/HsP6nlaZACI87+ka1iG1p2\nvkFecCUXa1h0QncZZc4Sxiv4OvSpIxuNPFm1lZnXKK2UcFABQ0h4CAuEwzTP\nh+Rmgxs+upOreISYxxQWheNAsqNL2/s7V3iveaFBl/tseDiorNxeB9hoomlJ\nF7gTXOciFM68DFOqqQhGFfpfZcDqzxowfqQ+ApEwi8PhPV7CnpFiixy2ncA0\nmEx5EmPt6hxHru2GacbcBzR4Ffi9YcDsXMz8zTi862vf/O3bjtodwcq2GTm0\n/SuS8zSwHf/agr6ZUx1coqHQDYO8Rwit+8fcTSRhCqLN44U0zm/yAF6fC41f\nnSZnhsA5SbDjZV3fP6uBsxq9Aob4771wsUQXQJKcpOuyq5iDwWpwVZNsWQAS\n+OuQhNnSJ52zcg63wQQ+sD94EfzamN2W5EeGk0NouQrJdZ2M/YiaSxHdoTiS\nHMVnVEwi49DDakVOS2Zvmr13cXaH/yjmQmmw9DsG5p+aLtwPCBaYWI3UP6TK\nmffGzuF4XoWpc4ezYwzggGRT3JgW7I0o6mDFkzOloziR6rNgvRq+W0StCKs2\nHsmKK4gO3RUBSMKcIkvZzLh/Ltmva+gwLNYvi4BYCERv6sZ0Piei/9hGf9Mg\ncb9g\r\n=lGCL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAWVg9N+MUX9Xjm+ZbOGK7+bYtkU7psPSvCgtZaSimcHAiEA149ircGy55ydfKFxRdHnx2OWOIbQtlDhFZazXNZlTfk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.0afbfef2.0_1593632635235_0.45659360787115455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-snackbar","version":"0.17.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/snackbar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=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-snackbar@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-ADF5V9ddRVeQ8fT1tJQDdlMaj6bIxUUPKnoPv0amUHc5rs4rRfG1WofmWdE3Z1ymWcjKCgm2BYqVbm8Fyh28eQ==","shasum":"8d546e945afac5d4752138c4d188d8a8617badca","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.17.0.tgz","fileCount":20,"unpackedSize":83066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeSCRA9TVsSAnZWagAAjm4QAKCLynQsDQODYP8leoNd\nhgxKX9gWcKUNt9wAAfZInJpFPDgX3CNQmyKRlV4vOgs/tNrQqLewLvSqC8So\nyFqOPIlii+nH3ozpSd383aPUk0lVNCt9ArUs5MQfo3ZUnfGz/OuiHkRsW97m\ns5QtMN9LE0yaw/jc8qdOURvHbEdGcaJ7AkFsoC5uP4dMccbDSp6QnE39BxJr\nZ1UH8wAxVQZppyW/6WXbkxmhPjF9YFXyrvpMtHMKXT0OapkBWFgacpcjd6ll\nAUtIXvbbUsU/V2v0tIIsX7j36D8mQ8JgBfBpqRTvIVmzx6ftk/Vfs92kB0fW\nlxMjXzlXFIJcjDKBVkTXAo9IE9b+J+gOfJbkbMIn1zWOdYUSVtnZ8n0I/FLw\nBJp9EnrB1PmnoSKVDExAqxO7KHZqyXfc7H7Z8KRO73askkYbqSQNnO+nCaD4\nZnxNT8DJ49HhW7mB4CIdCKgAkbOdZXgGJEdRL6Atfld8rJnfZaltpLWbhnEL\nalAfOxpMdI70+8STwJXEGSKn93J60GHXlENyWfuN+Q0VgbM7U8lPOL/Oz5IJ\nZPgS5iCL6Eo74kXo59RMWQwdOoFt1McJG/52XRBfIPhLh4Cj/HpTAM2GrLlF\nIsJsd2edbYDxc80WuW+YtFV2kbu9x+5vanY/vhQxiCzyWdZkLzBdlrNRD8oe\nme2T\r\n=fGiB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW3ZB9oMsIcl3a01Y9gqRtXaiO/A3S1Z1EnQfaNmPKrQIhAIfEDS75gLmum2D2r9DM1RhGVYJlo239hZifR0K4kS2f"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.17.0_1593632657649_0.20167963936598632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.fd970958.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/snackbar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eZOlHYqyTo+hqSDv8JsLSqAxssXi82UGkR06JRikB3Gf5toej3JMeqy3yfB3h2qpEVp0/eRjMxtu3tfc02utAw==","shasum":"af1d2edb6feca06be0952c734bdf4444bde7bd31","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.fd970958.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R06CRA9TVsSAnZWagAAe/8QAJeizs3DEt9Cc4gVxiIr\nWRrZWnKynBD/xQxir0FEx34KSC1F6FcbwFlYCdrHFl+JQsAJDzvpCAj1ck+w\nzKqkir+j7AUVHrbgvMNlAG+JhkVSpmoLCR/Mpqe3SdcK916oh7ImIJeG/RU4\nOEp7yCSRVc6faal0E5IeW41Rhwx/04ewso17TOcnlILucPv7LBhyjzpTIR9H\n4bEc7lFShc50yZhp+U4gPqeI+lFlPxQ2hJbZqJtSpiZ/jLaUILqDqpStjRd2\nwujcN5T5AXtmNrnbKnM3K8c77G4mxHtO277hEkOPq2ZGYNjis8pDATQAfmEk\n23DPiUSYHJF1uPwDLV3k4vnW79vwqpvzjgr7keRw+eE5KZYzG64cBRTihoUd\nYdUzbiViRLbR9ex89KWyUVrNaw10ABZlAQB0VHqfPEbUb+7sLzYJ3jdCSVIa\nYTYxW7PRkj/W+kVL1NipWKghxO6CYNy+G3kIJcMAdkZn26Kg89J/HoIiB7nx\nEBQNYtx1LZnEcFLyqcFqMg/3SlQNF7g+s0di4iyaeBf1K1+nMdHbdpMCwZBx\n5HOMsDlmJsEX24LfXCzQp+Kj+Zkm9urztTHwDZGLHwiV6Zb9VW5lFtNFBu6+\n+WTw1u8eyQ2VDON+RIfEIweeCxnBCOE8tT6lK87s1SRvfv23TZEYoy/hSSWz\n5x0X\r\n=XHx7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUKqsSRWjM6gs4n1sMNm5dScdiJj6q2p9FQp/F37Nn5AiEAhx5l7PYSVEFo/dq4ya8sCntH9ZCEQ+UslcS+FA++q60="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.fd970958.0_1593646394246_0.6383494510492227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.fd44be19.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/snackbar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BBomnWVuZ58Ur7vA3jYZmxO4OqrEfLQU1FjG6+Tu8QmWzkoA4Rt4UYzm7jusmJammX3V46WxXrgYPWIRMTQvRQ==","shasum":"dfdc856bd45cf0fee2db2ece79e7504dd0e18384","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.fd44be19.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUkCRA9TVsSAnZWagAA+Y4P/02JeqKuofz5xWC2AMKB\nX1iM+gp3y6V4T9o9tKVREOnzVh/Ou/iaFRlZhGBf/urT86y6oUjCk6Kzhg9R\nAU0yGkEZWyDCOZCRZpNSlov6oJV9eRTc/KbziPlGst31YvjukTD90oG6TDUw\nJMWM8A5d+nUhc+U+lAQpZEK0MvU3PEx24AMAMmEJcvB8s4Q4EwRantlN6r7x\nCo7YeN9q7eKmXVUhAmvURaP0+64s1aw+Ftr69/FT413yny2ve114NnTFsAuw\nWRSDJIjCju2fJ9igJPnla3f//cynip8p8s4+LQBckd6TvAPYotY5jnAT9b5O\nJ2jK5F7DTGIhTMLQ9foArB/ubR2nv4QjdBUU4p4nrNnK4sjC54IlpqmUsMZ/\nIwN4/jIQZKYvBddcpEd4CaTllA251q13Te2FL+6qGph+RsZqN3bSqaVgxl+F\nPJuqA7XkWuOh/lsiiju0/fg3nn1BHTQpeLqjqKshfJTJ0xDVmK7wLPRzyqSX\nTpHELiD9/4usZzgra4hllm8zIyJnPZbMeu0Ti2gVKyVlr28CLsibOsnefM7Z\ndkaXu5Xa81qD/e/gCHfSTlUs8WFmbjch3kSNrBJVhgko5SMeRw1ReNvqP2s4\nGEHFK5sXfhf6tP027f4J8elMbiZj5pNL14wca7NACvqchH5CQgDm78VyJiFx\nFHYj\r\n=BPto\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvKLgfDY4axr9sd8ukL50IOghK6W+Hy7KG7wTMbJZqIQIgZA8oc4NoV/1ZnC33+Ei7Yp5VlSflbeHbyhvnny+l4A8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.fd44be19.0_1593668899906_0.5436892558790005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-snackbar","version":"0.17.2","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/snackbar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=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-snackbar@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-FCB2yZVydb6iNon4hvm80c2ajnpeMALPLPaaIGYZ+8qLM1IMo1IgkPVMDBaw27crnoJjU5BsTMxnaSo10R26Hg==","shasum":"c52190f55df0ccb74bed894b69b1ec7fdd0f2113","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.17.2.tgz","fileCount":20,"unpackedSize":83066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XdyCRA9TVsSAnZWagAAQs0P/jgkLNtJx1+gjlLxvoQX\nc6inPTACFue6ocyhgfO8phbHq7MV7Ek5ktIAH4RnfznoRbJG+i/i11DSlOeA\nnpZO/qlSy3ihLGwwjALd1vaJ7gSIs6mbeGxe09LnzEOho5G6fJSKxuR+WyCM\nqg5BhqRKW6QypyvqIjzfcLnPhdFa6V55uPaxMX2hRczOG0+C24gD8iLYXiTN\nVDRDaoGKIQ62I1pdmHcLIrJMqFEXRGaTkUT+AH+oZivj1eYO34FA9hsHkYWE\nILO5alIydnjOpnG2IFV4YKErT0zvrEnCZHhhMrWBLnb2ZJhjX76DVZtyg68o\ngEozJWuZRVfW0OjQuDDLR2lwRHDKHoahIoL0by5F6S9BqXVtN7pRWdKJHepk\nTsU0yOUivvFw7BqTha5fzwrUgkgQtu8rY7hF8PLvWAi/ioh5adzDaJYHJ0zQ\nyJvEVILCdTPYP+hCAwD8hVfQXO7iXCOVq9n8zOxSSdHVxLjanxmcQqlPezqj\nk00HiNrVlZtlGWU1pYDBYsWMyxaz5apUxOYSB9wa7jfd8XjuVrIYYB5QleYf\nGve7A1wMW6EMPji/IVQ2iFr6mRFN9XHFl12jD4+H9uFZe8G8FmDzzBunQSDP\nvkmQjLr2Tyy70ak0EsaCPVavrNeJCOUQwgse/8aCJlJgA8dQ+/cC9rlu7sZh\n6BxD\r\n=xZtZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8BScmFqXz0GlLKCMiany4QgRWo53EXl9Yd5RoeONtqQIhALNPiHhC0v6PGZL4pQRtFZ78D1dCUBK7k2NlnR2pGfhz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.17.2_1593669490342_0.08861071700846357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/snackbar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-++nkpoRQa5iJ79nw8f82r6/02jtZWd7TjwH7eE1cLIGW9RpSO8oW6K5kmXCWWl87m2OqaOP180By+0jpu4f85g==","shasum":"ecba1935021ded58ade9c3b2a37d1b5f098c4478","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.ca6fc6de.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeuCRA9TVsSAnZWagAAfbUP/A38UeFAp/aAzY603Jav\nubbfUXCP1M/kPYp4jclhA9UsU7cKBufqKQSkB4FlqeTi+CgMDMHOscPoypyl\nkGX+WyrmDGo4SICWGDoObmU9mfDLakBNSa2YMda0bja15mo2EOoMedemHYbu\n/U99Auj4c/LSLRBhXO2wt+Ri1+YZaccDtO8GRJfCurP3FoGSDkHdbNPx5dV2\ngxIRBmUWbIyQ/XTpn7ST5eBUVdoxnRL6rQp94TaTdvPGl+7+8jnx1/u2ESa9\nIBrLi9h9o5vTSarbkjgkbnqiYdR4zXoMJ2sQ2DN05vPjrrAUtmwGrF+Q/e2e\nGFRughXtNAUvX8JNcuM0KHZ2iP5tSHI0A9ex64+qnZea6PpupHc8GbU4GxaN\ndTGmDxSuOuA5R5VoDTTtI+CnHZRxKXroTQ0O1RwWF0G5FDWSJ6SqbewqjGjZ\ncbM+5j1y2qXZplsexkn9hi8DPG5rd+0RoKki7ymMVgXyc7sXjldi/QFUGe0X\nuFrMewJpSm5j3lmDrRWusgwz9OlN5H4Ik5TJiU9FppYq2bVmodU7pAjpMWqh\ng++g/KlHu86b9swzyuaDue69ePWFfgOia2nahy9ZPALKEB+1TkIApQDVbSPn\ncQ1O2eQNoJEFuW3BsuqRnPYT3Xs6iqzyqkL3nn/EemGyI1mI/dS/yrPfd3Lu\nQVfV\r\n=ZEN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2gdOA9pCTjWPLGXJd5H8KjuhqWxmWw7zQAq9Jn4V1fQIgRlzejxa5RtPBj3TMlTdyeyDmqik5sSPRBL+eCLjpsQc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.ca6fc6de.0_1593669549647_0.4106544895994899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/snackbar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xkDoGoG7ywiDXAPoXwkknJ7y/SNKX3j6styMZBf92i6QFZ0c49CStIYFBWMzmsSmLBSrcgojNl8VDVld3yQEyA==","shasum":"5a1ddc70cb7d93b1ae143cabda44e49aa014f1fe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.79f1ec2a.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGjCRA9TVsSAnZWagAAjpEP/iWtleKDafP/lfoTu/jE\nsi443n/YpPmsylNT2ckFpPL29pHqvCvbTg+RaPOqL9dTnQloxMI9sZPlPWY5\ne+GXcZEtxuSkS9Mk5A0fFVNvzQUttFQ97oPM3jO93ZcHuprC9zgFZkVGmltO\nKTcVVhp4OlFGg9m1GMVISY6IzO6shZBKVGn8ydrytc+CfEDC3a+lLoabOhsq\ndN+Rkp77LiKgnxHf+qhAm836XK9am/JSmurT5sWadKHXoK7K6Bc1aY692y/e\nkybTc+JRFOEsdPL7emF6bWiEt9iFRyDYbiOt2KNWwZvMJDKwomk2YLRPOU+U\neJ8pP8l6IUcVkRNuYJhRikHG11lFGv4loas5GfAV4n69QLJu4u+EocbtrNn3\n2IkgoNyyanPffpPxBEciOHbnLM39kF/SnDaDaF4uZ+cSYGDCO9yI7Yen3Kdr\nVeC+OfIy2irMg/KibI6rwIcd4KMm4+GC3nJRCupMkEgpNkAWFj1SUQC2me6n\n/S+T1h/vh38yeePO5RFv6/iw4rMIKZ1RzAPl/yfvLn0EY+fY+dhbAA1kX9Ni\nFQZa3IGnyV/ykNkPBnTeHtqla9HCI7kGFi0OApzr7HbNuFzvWBnFYv2i9QBh\nqfRxxAUCL9ZO8n54JJMCxaaL/jKuN8TRQi5AbF9T7GZ5nDm6KDXBngl5iK+L\nD45l\r\n=EUv4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC77sDuhtMOSrQZuJoHCxRUA3Jb4eJxdSz5ddl2inw+TwIgGOSLhO7i4eJ9Iwx+NhX8t0SM5XCLNYFdXH2iGWEHb2w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.79f1ec2a.0_1594143139150_0.9549781000260011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-iCi3zKbgR1/EewWHHO+BByHdTFKxLNA9/Chry4nK06UHdk5aXriKH9SZg4Au6m2aZOqMkQ0jN65b9iWA9jpYgA==","shasum":"bf685ad71d2a9c0c71e549c15b887dcd23ddb423","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.a7bc45ae.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1JyCRA9TVsSAnZWagAADygP/21ql1tlbzFGos/Mp1Fu\nWIY5GCs/lB08abq0X5BhQTOTLKzpUkGz5DeBjmiToqtlAUcSQjD3e0EEBVry\n+17cgkH6eZc3QGJ5EsKdgwqIqdjFz1Im1kZlbFz2FTQKW3V42D01NYzNcPLn\npmbKItWNmcmjUSr3ZehsKhqO40zisUMsFv60In6eGFyt2fz9kn6lvNBG1fnn\nSRur7VVZHCI3IBCXC8r4wwDuz+MbjTEYH3wTZuBsLQx66N/nybYxA47yw2Ep\ne5OPg0qx0ML94q7mqDrOX1aCeCBetJINK/5Vf6RtUDoTJbCbS9/DCbDJv/wP\njuDX8BaPPJAnB9XZq0jqFc8hpVzRQFEWtN+QU7XdDh8Slwuh+WINK96GYlbS\nFStox9UwcpwhIkmXwkDOmlQ8IIZQTUPNCDwDVGfP2nl299+/9j/wDyrdizeC\nCCvsENAogxnNIYGVrZA/VyfefxYLAg9d7IOZcP8ZKaNdY4C2gKAWwQjJ/TNu\nvtL5oQlDnsXYCIR4Y5ogwSdvmrOI68mGOJXOl/sGqhlARtGYWL88PqkIGYf/\n3Y2jimqg3qHNjRqxV4v5TG0nGXghrOSJF3kA5T5hcHHKSwAEUuyUmAQm+M4P\ntlIvCBASOUmmuOMkiHEFt1k9KCGTIDY/kJgaoX99yslfbaXghW51Rn/NKuqQ\nD11n\r\n=KIEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlTtkueWx6iBcGO29yYNBqyEQCUblv/b1e2wDhzqro8AiAMFlEJFfDGkCxQp1DOO1EWF7G+qa0iAYQQgGjpdNkxVQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.a7bc45ae.0_1594315378336_0.4538962616476958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.b184bc1c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rysnCONko0tI8Jstewl7s/kpreRtIUAkvf909J1OsFXfgYGYBt9cdnfJ4HRzMXaWSHjTqOqMA8Gj0Ps427hxPQ==","shasum":"813d60d10ae529b9d5a46169233fa7c6ef35f750","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.b184bc1c.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SaCRA9TVsSAnZWagAAsK0P/1+7/YKYDSUAQYKqQ9MQ\nHIIF5pGeQjTuolzmcmNzHNz7XxplkudqKyVvm08eaPdEgOrHuP6dLFdvq+Qr\no3dBfycxh8rCNyK+X7zERnkuAYHMwNFugY2V7MoKtlccwXZZch1A+/iRYwnK\nm7CxAaWZBoj1f9IAz/KB+2cESlge7J2rhmCPoRoiitQ4BTIVWdoaRPS4gfEi\nWEE0lC57GbMFCp1s14X+kmZS4XEalKHsEBS1UjJTIw5FlxRr28oIQYmYfySj\n2fng69KMa4outNuCv7bfzM/kYikSKxBHjZxfF9Q5NvrfhKlsEs37W/qgzLDl\nwmkPoxsgSGbZPtYSKi5Nuw3HpeJWPGnsmzqoePRPIgg54eqcF11b3hFGaCFW\nKWsIVcFl1vxG4agB5ZG9sX2ckYRmhfFX2YRkhygyua1/B2W6kKfGHnchYzqA\nO9qPA3cF/DCgfI4aIN8IJZjV5OZI02Z5Fyi5ht8/HN689KO4m6BgZFB5WeVG\nce0V9UPPjwcRjSEo2mHKGgZlW6M9o4qGd3FPbvfBoSibsUrjr0R/vdBvU0hQ\n4wtj8MupxO+AZwOwJtqswVKd/GGcWaPrzalQLxVbq8KFTNSPsQz58BUBXjP7\nGFntHfePz0YHiqRmPaG5CJwPD9luhgkBbCYKIHgv4B6IAz0EiUgO0Xe5vFHI\nChZQ\r\n=Fj8c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1ui5XXbTIvuPsvhX70bX9udVMjEEI4t1mI+mxMXfADQIgRwNxlD8XEiEhpQu+D9dAoTQ2KuQ02GGDc4vk4gjhwFY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.b184bc1c.0_1594315930241_0.25486509616762354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.b39fde62.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-y/fGtAEPJ7jH3FEM6WRSNpdPmQ+NraI+jS+hyKM8rmE1vIbwB34/ERhZCe101/gtAJIdzp+JG5lZNrySHdSZLw==","shasum":"d5536fe42b153cb41e467d0f41662b9136bab895","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.b39fde62.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XUCRA9TVsSAnZWagAAvj0P/jy8t2pM9u98Qy8RE3xd\nNBeodL35P2ClRdeM0X6V3iis2qKnBC0u7fRWXurCKCSso2upPOZlYx1SRD30\nODshLb63v2D9uWKxmYgb7/VvHnERFyTbWk9k2QHmaBtYl1uq4NWOLykgUcNf\nrt9O9MFyGFYkgMaMJ9GlaZyKqsOW74XQmy45Zv0wx6acMKrvY3VgzW/Hn1DE\nUdkm0lImxvZ+wwNCV/MCExmhku63ZB5j+jQ3yO+rynavt6VMr55R+VnJ0ZnN\nGZQ7SJeUTqH9ajnjgQhoSvUnbQNepmgeWN8gbSqGdhNetXVTSM67MQMH5SAG\nbAgNAPZxkp6jxULrjdSqfHli43SqNS0zar2H1umCUiU5+8wdiglpTXcrICVr\nhcpvugCXsrjceB+HejSjzAHcSeA7IgZHj2/XOeOKhzeKe9NvMS1InEKENZWt\np5I1JMnxySwQfHW50/ZeL5C9DI3sMa7EejNuB7+YWMzibsFYRKa5uYknlU2J\nX3hRHrIIT0d/GXb7/UANam0o6wLVF9omvHg4vuA5TAWnULvZp4gBf5mINZAY\nbpodnDjFIav2WxF8/c/HJxuF62nx6/jgSMe+2B0CcnE0Ko6aIJgb+KvvQxaC\nwtDJFyPf7IRZk2DE8Qc/VA2bGe8+Cg6XYkCmPPyNfcDgm+bBbofZNlt9+zPN\nxfLQ\r\n=RmrV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqjiPf+bHCYKskSLJ5z+M24VUx3d4csKkVKh3I6SXG+AiEA5XCUBDkQlnHT7sMjbGQ7Q7ulPn/CpsUpXEDRZrVx+zo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.b39fde62.0_1594316243570_0.36979528697937836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TTvDClLVaSrh7AJRsW5QDrvP/W0b39o+bpbcu3/+gKnzunEJj6qJWQCKDSaFqRDTuE2NBlo8NMaN6HX71b8IEA==","shasum":"4b4a2fb5ad24e9726e82fa8bd5efdd90bc7f3d52","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EeCRA9TVsSAnZWagAAAoIQAJxxBM5dPM3l14X7Eo74\nvogsXHCoHbqwo+fXZouYN/gyQsmWscH+JkVxe/EtWlczJ1ZCE7ASDNTchTZK\nipf/YSbWo29XWLEkklcnwz30ZjN/LZ5WSQB0LdWpuOy3ZoeIZwSd7lfWKZfz\noKHDMmzwAOVrQMcYEolpacutqV6poVY+Vt2Ldkxpj1RC1XaL9an6WGgPFoka\nXwYvYEsnLA9ltXq3urwTjmMEO+dO55BiQ6PHwUfdukni+4Ajx9B+fa891/vS\nH8GusruM2kW9fY1f5TXBZC92ZJR9DULgCLWMz0bjkkmTu2tPhdvAvIHdkkmA\nB8DaDLiz1X/K7QhqveBD/T+EWk3OnACF4V8q2Kh35ewKC25whJmZ22L9Nx0j\nvqPwrPZnoS6rZWZUX2ctmZgIlOOUQyOIPe4+MVHnGfwpVlgpXruDW5bb255N\nTGUv26ZvPAfMf/YY/rfsatEe69fPl5KpkPD/vgQdfspG0alkJlJouuD6skoW\nlW09yvSDe5KdfWW3ZSN3LygFwcO1k47xbNKds343YOwiS2ToXRQg5PShJRG6\nrHRLzSNQofD4G9gnugvHJsyYId8Qd/4oruZjkXOsq+UAbwH1lChCFwFC3Fwo\nUe7e0WWe22UVaeOzfH4F0sN+wSkYQof7DVuOPlDvvziHi8O6iQlYU8lu/usd\n1EIV\r\n=QqRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdDdVX6R+nNjj47u+R7GnHlRu4Dih9k4x6lf28jphMkAiA5Tp9Iso6WOa2ak5ks3eCEm6alkE9EZx0tojlNGlWUfQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.dfdd8d6c.0_1594319133672_0.9336673850669983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.11cf2694.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mDX0PqqpZFTekbBj6uQyXJOnxg0OtRlGic36w80bz8h0Jq5cHTAWNM7u2EC2TzyXSBqHmrZuaUib8ulaEASb5w==","shasum":"0aaeb5df3eddf8c94f7695c01aa78eb2ca3b4f87","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.11cf2694.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FnCRA9TVsSAnZWagAAjI0P/3XJ0uE1O3H9SwOCQvdu\nEnUpRnQdCyI+rmrOFLJ2xJBVEyFWabfjnrMtMI/isiwK7NsmX0SarEp6PbAT\nV8HnWY6r18MPh9Frs60VEGWVH6hIHLePTM2hOvtS0PUStwUznc65CWQdqneJ\nuZkxQM3dPy7zC5BZCH00IViy09N75JR4Dml6u6MmedrWbDERT9ukaO+fTzgr\nnyE6V9vg796HRTbRmwXvsjdwBIcmPmbUu3JeJ1Q5UUyVvoq9UHXFyIhhj3az\nHTofdAPCLlTKWglnlkIPylMmTgth7knVHg5rwVy1YQD3r1zz7xFbQikj7jpe\nlJs7fCCcyAHSbvpjxUc0gW+cTMdQ3rCwNkAri70SkPo9dgUJEy7QiTvKeo04\nj/jYVkQvTSXfh7DTxZdwax4eTZl4u5EkWa0+1DHMe1ZFVnWERmwRs2+sbKIw\nRGKajzq6qaKgNBfLwPmt8jbQOZVY0GRyb7C+QPAEoULO2beYT8XfN1op/Mkd\n/nrAEXnBae6ikoA6cS8OUvPBw/xGcLAF4Tse5IEm39PT7yJbsAG125F5ChxN\nDuzHSuBTBFg+YoKY7YPqlnPvqLilnehe1L0NYhlvD2yiYtRXvGrt1fPwBior\n69128loMMLXwU6UhD5DZbzeNDcnnlm3mTJd90AxbhXU5vUW/XvOefvKS4woD\nSwJJ\r\n=fbgo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8QGyrk8DfI06bm4bX5qh0N4VTo2D+vXY1jCgHf1CI5AiBoh8zMRRJJcZN2PhrYRrwuMfmPFeH2zNo1F2HBoDQNlg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.11cf2694.0_1594327398784_0.509378982414564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.436d66e9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TvHW0ZYl1cmlXX9AN9384D6atLwKtUgNKJdf1lEPSvP0tr/026PDSxDHuTucrOdvqqkdIE7Nezx4hOKbItghGw==","shasum":"cff97d93b836a71a05a6178450aa8f3b62f76d2d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.436d66e9.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KGCRA9TVsSAnZWagAAClUQAI/kUR1nqQUl7zXYWi/r\nJZuSo9lHHBeZlymWUeUSLy4HixPgT+27ZLQQ14Fv25MmwpCqatmv0EaG/jdL\n4v4KA+tmbJ/fVvJuG0qk8w/sWzKzkVb1t01XJPvvvsCpQukCNg77tRbtxMfI\nLGC6q82uWrCPv4PYEvzjOd67e7QM1zrYCVLcjSAA7d4FyZDzv7c/k57bnK/j\nNpAEYIUqk/fn1V4t6ZzAyIUFv6wNysLZdDV6zlkRO/icJ61yqBmeooCM6zwV\nihTCTitfKvqyGAupOyN3Ppm4FoN9CxHpLObGKB2QOvY4+iY/BcFGH+e26xjj\nijvOjhJ4lbRGWLVcqV3e5HzA2AMz0XGMvI4VlnRs6LU4crO3I6/Ahrb0PW/y\nKHQsMF9YVrWgQl0T0CACmLe76s5KdlQ1MaeBuoiU7nvjRiWZslmSQHLmngiU\nlXwvefmoVMGoIj6jnkPSpbIkO3sKAQpvAct/J1kXVP2+r1bwVUzgOxhsYj6k\n+2Vq37tG5lUSQDJOZlO2hTZUyWuiHdZt48ZZBLEKWSjwPqxPvEUBAb/ffIEA\n1mf4Nz7JYLtSA3h+m3j5YKjjy4XODQ6/emoYlYW9VQSP8IDys44ZibQpkcKR\nD6Ib7woYjnf94Rros7O36Q8MBJQZueAQ69hDXbtDrCMtgk2FYRpoTxGhSTvX\no0Ha\r\n=4nrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEu1n534v+36FSftt9iUgZqMUdpR3ZBUB9PMXX0sqzNqAiBlQLlaNcpF9q/m/vOgZM3h8itsUKqsGBps8cveISl2aw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.436d66e9.0_1594327685760_0.896710839025268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.3a44d36b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/snackbar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-3AHdsUKRplLM5UnK2oJSjdL0P9LA6lz7g3OqxOyXeVT0K706hsOs0T+Z/ANQeQnKtN9d6gvqJ0uwTqSvcBwVMQ==","shasum":"7a5489e171b012caa65d278b480b679cf0615626","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.3a44d36b.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7g2CRA9TVsSAnZWagAA3voP/10UyxrPgpLlaNrRIFFn\ncAIOOtrjuLL8nGAinDyYjVe8e8YCUsTW7lZ+0KdhaJwGN4ujdOeoPQJkLBz+\nrliZNJyDI7275yWFiW4UgepbcDwxCDB0oYHhkqJ4JB3XanoDJGvYaZ5e3O7p\nbAGwznKVM1TbfOF1kOrBOHwZ71QzrSsCuxC/2VzWC0Zt+rbg6ujTe4oP/D3Q\n8LAdS67b/WE1MssJcizNQNgjBR/mtI/FYvYPcel5zv3FSYyPB6B3geRFF5AT\njotIHMK6RNFp+EZQpD+rwow5mJscpIRhigK5XDjleHUf75PhCk8AYTsYu++7\nf5EKIIutKiaS6A1BDkT8kEMM4xs+n9P/sVaM0hN2EFRz9Og9ZqgqafOe+EZ5\njJdtiFU44Of4hejrCGgG3mC54mmDg4O3HC1d+BWH8CTTA+1+poHfY3NuiAUT\nTqhxP6+NbnRRTXZeSaiThP5u3kEbMKkj04GRv7/M9hja7m4GcTg0bhqJd85c\nzU00zVEKYalwJOTIpCbGQSyuwm1p05DOzKdj32vLEqrZQhskW7Rj8580Miq1\n2epKGlHpUsgjtbbSARKBUzzibCdnQHoy1tu5GdEAAQt0xYFjXx4h5EYT2mO0\nPIgIi7d1zhsca8eueAcpXgg3RnfNVZCx1LndiMxVJA4BEEvOLryMaMYZHJww\n1zKo\r\n=RAyO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrGjFs5DhMxeIIEz/u/zp7o++pNKemJkhs15Y9vVYmdAiBi/TXAJJ2XRqxYDSXlBgJ7GtRL81OcH05Ck68hYTNOgQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.3a44d36b.0_1594341429836_0.8217859504080114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/snackbar":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1e7cb6198.0","@material/rtl":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Du4FunT7z1wSJ1B0H0qeqct8Lz8lAPOj5+07tzaprFj9i/6qbJcRSmr1ZD8Lzc4x8q0i9D0bzB43T/nHBhLpnQ==","shasum":"32ad86d55dcb817582411fb84551137112f7cec4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.ec11ae6e.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKrtCRA9TVsSAnZWagAAJjsP/j0cxTDffaZomk52LgiN\nQ6tg6gUv0M4DLGs1nLC5MfvV50BK15GM20kIJnzVDZNfVxUepdb6TzbjR7KH\niLg5XztnjBXqr3uyKv5WKjyoAvniuFqVWzH4pj3Z/4Kh/G0e4T2MxHQ2Sg+e\nAy7EpGXTnLvw3T6IttL5CcFum/hj4GF3Plt4g7EmkJEdHwWLQEA8FN+KxrWL\nh8NHipPpVqJP386qV6mU4xbK9e+17011q6Q+CV1LNnvGq72RsN588KQ7OokG\nxfkVI+b4fYS18vIuVTUqdkdtrjn6keMo9A0pu5FDzNBsXSJgwR+VD/zB4Hfx\n/sALZk+WTvjk1eGFCXcDiHw8W0vi30QoC4Q7b1kG3IbQR76hs8z6f8PkG/rV\nzDEN2f8FzDCBqyE0J31a3y/zG/3Yz1qBGuMEZmkVVEDzh/83PViVO7d25zP+\nMeBpa6vjE/+mbxGFMK1jVE77lz/fxBYXzrle3TcVzwKZpp4Ek15kEP+or0H7\nuC8Z2L6e7oy8uyR0LpLbEEfGAHV5Rv25MFe480GY+k0LQ008XMzkvct0JrOB\nV5DaO1JApkC7AYAMkNDKNqbvftSL0JnXcZELMTr1ipiIct0BJVbsTanHIutv\nliVEpUYWPNH5YF0LgP00Hw7+fBkuLPSZ4akm98UZnrAimz+4X8/890ZL57VQ\nax2N\r\n=oo6D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEBNafwnF4r/l1b9tcj2xyPolPZ+/zwZnh3Fgi6Qt4jgIhALrtl20c/igjzBMFcRgImzzRkG9U3UNTXsXXWOWlJiyD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.ec11ae6e.0_1594403564632_0.07740977465828602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.17f6cf27.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/snackbar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jeAApnyx+XZ7dlWOqyV3ieIwPb6l/kfP84DMA/CDXIFeeoQ/6F8Iw+4m/vLGPD5oa2Q2nMjBs6DqozLBJZ04Fw==","shasum":"a4fb79084a7aefae84b90d781b3b479e2aa7d37a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.17f6cf27.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRFCRA9TVsSAnZWagAACXoP/0wEuQ6P9JbfwFZMXgjY\ny3tJuic0PuC4tovlxuZO77EvQ3wBDPP2zQUAFIc8vvNQccP7Hvc67gWNGdC2\nLUjoho9hT/aCUgMd9eWGsDAaYaclDJs/PeQCDJECUyhFA3aBgAAxAajC5aBu\npzqyIDvmtCj9F55TxCrhxt9hVXe/gQmUwD4exrXbAQh9T2PhwrxNlxlebCHG\nd97ss9CjfAIWebGLwILNfNK/mBMToUZcAOnZYJBV3wO5KePpiQ1O9iUNFnlC\ngchx0UOtojxFLRA/i/ILB4s5W8MHOdOV0g64r7rle/K0uxgFaGaC0XvqnapW\nRl5mV/WfE0ZBOKdEnDd4i0/VnNfxnCCUPtHQDCCvacWpOWb0qpQs2q4jpuwU\nSVllShWMsLpO2l8myMd1AfU6yCrhM8jBBJuQyif0Xwt0D4K8Oeg2KXOfYqNx\nvS6vAq9fCyK4S6kNYB1d/Ms1RuntpgNJRTz7JXE1EeHiNiwDm1ySe7OHaHjb\nB6T4n0zkG4e1lefhBUXB3jBJUkGojl2ALKRxdpkmobcaQlPQq12dusvQkI3m\nF3qhCXnPmbZwK6NRPowrVFJ5xHOL1/w21DXZqJ/nP0DhY7+0fC0l2pkBcVeM\n+L1IHNMEb/nCbx1BC3AQExexUDfWk+gLwFz3L7BQtOgJeRTgEXC+xQz1fZRU\nvlew\r\n=OLxo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt0LRAq/Of4mmse4qI0uMMKNVCz6f2HRwWz8Tl8gLwHAIhAL1H2WQbZCtWlEHD2YEurpEy85lJwXPQ7bSV7dmxz1xv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.17f6cf27.0_1594405957122_0.2631246421464488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.efdfbc21.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/snackbar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-m++XgqlOe7oAr47ONmZrMKPg22jVfAThttClGGy57KWuBz7C8IQSZEy/SYNq6V8XotRhIQA8wOjYQFtfxgJe3Q==","shasum":"82b7b135db3618c7ba119d6f2b6bff73d84ec695","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.efdfbc21.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcDCRA9TVsSAnZWagAAEh0QAIN7silMys/wmyo5rokc\n6VDHZnRd01QvetOu+JGzXcxr1ehJ/sDgVbT9RKzNESrcCJqhHoHs1AQCe6Uj\niMGT//DRdGfalEZQwlXSlKZGCwK8RyLtXdJS102pjbn9wfrPMS6eztkpc2Pd\nNO1rV71rjVtG6NPk0lXcXZ77VzJNRkFlG2ic6VrSdWmsx9tvoip/MQqOhT7M\n4mQEL7cUeb2SKauqjsYZNEDGjrrj2qEnIQ5CWUlD0XZhcDo+ipjg5qbsmxpL\nYUavoLHz19eZ1TIFYJrG8fkMCIBaajlNCu7231sD4laAWS6i8HX8fGmF78WR\ncpO4xnvd3msxcf+xeg5NJtEkmUQI087ObCu9iUjJU31uQ/S0PNM3cR0KAOFM\nxZIC9vOhOAyncQ8gUAqQ8M9amxgycLEt+sVekpfuxuFZTYI7XEaIVuhTa82b\nO5qUWaglKZkIxlnuKhudLxA2rfhpBmoOyesJOYyKjGejTPpbMSYR8h6WpgVB\nkpI/03n0BtJjLTPLV01W5StHJ8GbtvX+fnqo8GdgHv7d7ZI2jRbktIchYBIh\njCRRxzBySGbgeW6M8Hit2ZoNOJ9mv+Lp6ATdvZ4il4tp9+eT/gDYet/zBlF2\nUzA7MgNVD7FuAvvujExacGIzwXqBVxmORVaePmw4eV98y+0pRNM10fRuMbyR\nF0qq\r\n=EwUI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9fBAb+NOqCOqAV8ywKGvaTeaf7eti5jGVyEltoOEAQAiAY/MIj0iiIrE2vQLyHYL7o/iytfJeJsFt6fHTVBKXrYg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.efdfbc21.0_1594406659562_0.053942969843122635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.bae4339a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/snackbar":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.5dac1f624.0","@material/rtl":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LqGbFB6ZzMBZ3KIQqAKqqNHxLMY2IXydYSLuLTOPhP7Na7dTvp8wf34h6Mb1AfViwv1AeB0aFR6wlStDghy7mg==","shasum":"6fdfffbaa9ef14233ae4dc723cb7af775221813c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.bae4339a.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBDCRA9TVsSAnZWagAAg8EP/iGUnRRYyYYJ9bcguLMX\nheTk6HEjXfq9EebL9YkEw8hlxMbKXncgXORdWT57CqCXdEixFGcJ89QWs3jb\nlmfhfs6vnx6phW1P/zBGM5hLK9CcRQTWYajj6YGqIzz0jND23tYPdNR1BdmS\nKbqa86oYBeSpJzGnLjcI60T4uoJO+uNIbobRmICLrCq3rZiLIMX36+bwiQHu\nTMFgtpTL+GA1nrymKF04DXXYrwyd0BjWUhnVYhpH6fOkl40kCveCbC/rl7jt\n+4GYhl/5BFHs+pe4yEIsxWWE/p60FScAJDgsAYqulsJMMrSbJPvdOX2Rf/mK\n3Rv+AXICat71y+t84YW5qI6eGNpAA9bcEDx5BVnMouSGBOYsVLD3GokOJUnO\n3gb/l4fFLeXW5lKMW8D8zIK/0OAsB7M8IZ1YbHuASUsFuvyI7c72S+03LJCj\nRZ7If/eiYYe8p+8LVQPGXo35zS3rTPqwO7HNNGVOwSAuIk57/tDMnEgDNr2O\nQKAltM9pmw12FF38jjv5yDicTCBjrEmPqF7radmWbbCaVYZsZymtNygfpEnL\nRj4LNi+vBbKkXPEVAgL7ZReWIVUHH4TcGC0oD+jcSalbQdAw6AKKHsT845GY\nDboIYugkVywBke4w7CG2JzfeQg0J6NJOcOssCV0A2p31q7sIqi0yhjtZEQQE\ny9S0\r\n=QPBM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZI7dBsN5LWu9x+DLVbLilfhOA7X28NP17OSf3JlvL5AIgJ67H8WEu5jGC44VzYZ1pewTMMEMXsOqX94d86Y73HuA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.bae4339a.0_1594744898976_0.01230005100860132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.28eac13b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/snackbar":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.e6e23019d.0","@material/rtl":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-U95sK543Yac7Eg8r8609Qq9XInH1LoADwaPXEjSmoRUky6p30HJ0UytvNRDR2jYh85+XERAyxlL8tIniA4gfcA==","shasum":"818faab177c17d9df4042d3a928699f273322e0b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.28eac13b.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBQCRA9TVsSAnZWagAAzp0P/0PeipIyowJd09hk6p5m\nl8LBVgF8in4wBO0qUIBI/iZDymsOUuiR3XkcDPZ7mEg5zaZnA/pgxPh4T798\nEZswUbMQ7iP7ODV/HGB8EylqReXWSiTE4TW68RlO1Q8fjR3RoPu928EjD0EB\nv36krlIgvZf1gmDBuuM/DhscHg5CEBKrC41iQjWhMMreS+R3nxvxoD0y6B/c\nitb6MQ+qDyNtfnEHsez/EPzbWtbACcePQRV/oNC7QVjef0XXLOsyJY8+o+xn\ndG3IVFNRg2BVgDTm8oOVcrzwskFYsJ7StvxNrq97ZqrNUWZJB2EVnLN2XlbY\nke6IG354Bpl9OlNQBoz0dMnH0fTU13nMBLHACJSYsoPKzuyGCRN3Oosu9zlb\noX9REGDitgoIuBPgdjroDjisblPukacjPdyiXvd6o3ajPi2iFGsG44T67vDY\ncGcrUW6084YWFSE91+Xiwo+1NBf0ATadh13mUdaO2a7rMm//c6E/YOBOqqpm\nTbN9j7ELvNA+us1bd7bZAqCnWLPpCL5XKo2sZc2YIVUZSruOKrayfxkLjkJW\nUEq06L6PoCnZhA73n9btOd+IF4yQEufAYxzvDc485ETLRfWqBA5WB5j/lqbB\nMpjbTcEo9FceyWMVVVomLHlw318WsvOOOs6XpPggDpIurFxs/G+eMXl357Qs\nrGdT\r\n=4G5l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnFUm1vFu0H0aIEORFNm7jn7tj+zBeltEpa6O5e+48dAIgQ+9r/ie5TguMQqZPjwMsIQX6tapdoWvbqcERGgoQJZw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.28eac13b.0_1594765392203_0.06730447629099134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.44966b65.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/snackbar":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.ad4df58c1.0","@material/rtl":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+dCtchjWaJAiH4Uf4aYBc2gcWef76WU7JFISxYNOkYu1uJQWgXLi7GPrdM7Pb8JUHa/c0cYJ06TYU7fl9/OLnw==","shasum":"e3cb9ccb956021f73d3de37527772df5d0e1972f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.44966b65.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0U4CRA9TVsSAnZWagAAd0QQAJLzaYDj1GrwsXOc4L36\nj0kZ0OV+/s9PzlEwQAQOFfIsk3kvbC8VgNVsO7yqTp6RWuQgKRvSLwisl1wJ\nD4wOdISrhgb0KCij8JaP3tWjTvf3kyQnn/bIqisR9feeo6U2QTKvY0HRalO5\nN89b5FQ4O1ClKYTTEWfYjKo1E/DxpKQBp1L1c6Tf2F3ZNgIoB8B5Uun7x185\nQjhsSrqfHfYSK9wVhhmG4+G3YZMzMMbLPiC9DJhMT3sgbLcKtOaWxZzvNagj\nuGoWfaU/vZc+kr+/R2WEjyF/xs6lr4lqje60GTcy3OUjGNDC8I503BA1Fc49\ngCuK0uJij+h9RvZxNXDMg4Z1sumcyj8M/xnGC+TWMJenmUvR+qEH5vJflX/F\n9AFKtVugeRyPOnOwrFWGyyO0K4+P63bRekMxyuzgm9v6lA/FpiKMw4Te1JfK\nDFTFR6K+aEcm9OIsOVsQTVNCZvHmrJgG+qr15lNiTbs0URAO0fr9qhcwwXUn\nXh3anvcfPzvEnY5oHFZLzzyMRF8kUWvTaWai64EN1XjCjMA/GIe/Z/QXs+gi\nwv7jcjmmpOsXnR2aQe3RLEyeOCgJlgIv8wOXwBehaORqgaHN1Fzrxvx8uu8i\nzg7lKz6Xk2EGo0Kc9sKCSvAz64upfk/S92dNFdN35ALSwI6TYVNHEgTBte/z\n4Vlh\r\n=BIJu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEHMGjmIX2tqXVMpMm9uCdAIxRBo2ATWwOwC/hbNF/SAIhAL3Ermxr5r1UIn9xinS9sfXKM4A98TeG/ooscxaruSV4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.44966b65.0_1594836280323_0.22935741706870671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/snackbar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5xJ6gEbB8sUkDiup2Ci7H5vEFglnDqJLSjBHYEG0DVX6K0K1vvRMaqIpiYJ+hKx4YwMwzXRepGfswXhARYivYg==","shasum":"3bd30ae798fc4539b25ed762933f7fb91c6e380a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.3ef0ef60.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZBCRA9TVsSAnZWagAAYqoP/2JW28MsWtadTf+yMHN/\neeipjeTECfhtqXUl+z5Z2I5g/KAnti/ILIB87qSp65nG0iP7YvwulTyb2PlA\nusgVBUb8yJBYCyiZ37k5kAoIWfIEEnuNrBldqDgAuuaNHoDDMhJw1yNAKx15\nes7PavPBiJmxbjvMcaKV/cMTqVHsBTCYtENdbT9NmkHBvTIsj/4vHCOeewZY\niSy0gGzaPCTRAU73yyGZtj83xBvkcQbOQO8NejTpkPgZR4gqmE6Y1KOecslo\n1awPSGrsBeLcakQ6II89SPfdkgkCPjXAI6KeB8lStsRChXwOT+C56TGd4DGK\ngHOhzdaaI8jX6iUhGvMO9hAMlM73L7fQ322FarL+/kVRJivmo8kFi2Q108dp\nrOvXbwAsLy76o1EevwofwUsdsw4EqFnLTq+p38fQFGGvD2V5JR7DWuSWhsj2\nA0UHKqjcwMnhRGEs5BI7It3pNddsBXuHPDqaZHjJdSSR+h6Pms33mbjKWtBA\nJp0h5KYUR+xJK/0cLDFXIx7HTyuDiA6iKUrStf/FfN8uMXjyFALpZfAvKRyJ\nm+tI/+7QVL7Py1XJatO15QA2eMYBGUPTN1mFvOv4CnrhmT6IqECQ9BJg2fcF\n9eLvfWvuZOWjD64+kPw8kc/SEt0lWezTTqMCnxZwyzVBCi1idzlSsXlIA8FM\nJAeG\r\n=vb7p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnriIzpDRyBw94iSEUVIlqyXxzGea+AU0Xkt68PzPYGgIhALNhYgSKWVxBr0yQcgk0L03oSyodKKNFEfT3Gq0JSW2O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.3ef0ef60.0_1594918464741_0.5124559632723984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/snackbar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rtlnonxT/Q36bV/VxiQmPaHnWPIzTCVuktDbkwnbU9IsrjpH0jp7G+wj8I+jzZwpiizVOuiaOl1CzNY8a77PHA==","shasum":"a7f68f0954b7d7d788c1d14cf14a67ca23591af2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.fcebf9e6.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZgCRA9TVsSAnZWagAA9jsQAJLne+YaS9CmG7YdGtWB\neZICi08/XfiYQ0yw9e1ZotVX4ogt1ePR1Cqz+lCsXrMYbeFwwmy2tMpEQT8O\nCLCoAZclg+CI6wdSeYwP5/mhqp3CeKBi8aWJ1QLCnlpDBTwMPmQYIoMHzFNJ\n2KsXJmsABTzLqBfutuq2lQrRdNpbAdkeN0VKXSGIaHr1YkhxW+eYwkbs8DPo\ncnm+UE2SEuNX6+zbdtSLkWnuu2jGRQqEGB/kLSKt1PAG55SPJKYjrstg7/tJ\nKZC1W2Sr6rt9tZKRplLktgmxn2YW3L20JOp/RaBL7pX4q7MdjQNTWUuiDjsQ\nK8ZrUTKqWWwN4h3RR/RbwzI/htBZ8fd0ShcU+SQNsC/Fpp3giA0ijogJYEJd\nDacLgoPHxC/zVlocKFSP9R8+jHLqCHxdEX3iMqYlhJHwXRzEvEbavafjmVJ1\nCLeTEWx7xDQAAcLvys8j+6G8ayOsrIijyKNndXwIOTcDzdt7YuOcBSV3j1bI\nssghH9z2A8NiPYTkQJZ7K4OOdjHJWDdI4xyLF36k5tfT4pCvm3jP2qc8/ceK\nn9NR8ImSaJeEVpcvPPuSiw82Viftq65N4n588EFOvQEvGUH6KWpiHkCDpnc6\nHEDPqNjZCHnykMUy9PB8kIxfF5Rt7gDJ0fiO8ePyRMvUhVUufxWogbzmibYr\n3Seo\r\n=0clE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFWGmnIiUsMVg0FIbFDm0GMIIK3IvFDI/6o2TuDWVuzBAiEAqJG3D9SsmuPHcIwhgM1Cz/UaIT8r/oy8IdxSXn4GOlM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.fcebf9e6.0_1595270751671_0.7168444469134654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.b6a772df.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/snackbar":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.fb5a4cdeb.0","@material/rtl":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-D8YwCzN+y8XJwONGdoGDaZuGS8nla5Ei+fgz8w/dDDjXXRMg1j+aw3q21+0EyLphM2BjQjL9zDHOSFEDy2nCGg==","shasum":"92c6166d7d1fc967e1e9ed8963a6fd5eb055b25d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.b6a772df.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh65CRA9TVsSAnZWagAAESoP/RaUA9Vo1/lBAIWE+ohQ\nvv6VQ/+/6UbfD1rOUHYZgD7e5l1SMJ2yc0BMSFL0GgBWpq6TI3gJ+Li+gswR\ntk36eYe1BuLU34Z68NcSbmGxanwds6V5VH6MYa+nJ3knWqcLv9ee9Xg5/FTN\nMym6Fz6nwxGbPHIIrucqeQdnzBNH3Dhsr9ue/VfVi+9MxtW9kBfk0uwk8p7p\nP9rsyU/yI4NMFFjTU5VmBaYfefi8HJf4pAnfm3owlOeG57v3rCTe50IT9sED\n70kwV1riUG8aR2jDW4uc++Xe/MVLlkNtEa2Deiz+uXOnJAiDyl7ecVwkLMYY\nAFoH2H2v76+QM7RpAiMfh4DsE8S6mSkRRnlfQYugdq+WsoF25gi9M8/vWerU\nzRLeMEysAs/z/lHfBZi84NQE0hqv5RPJAq9a8QJ1zoy9lE7fHMbsfDZJq7r8\nuCYzesqTcmAlZTJ6niR78+aZsnHFb4+G6t1kFeFBg7KXtWzBuUqMDIMjS9kd\nCeW5T3srKYQ723ihCbgBRTjAOa0Zzfytva3ZQlzjDmcTEFN1pOO7I5D6B5Ld\nHTO8MKpYWsoWX09AF46g0jYfvyZZlQseRHCXPFMuX+hLTVNN37ycn6bHblAq\nq989jXc/v0VLFLVJwv93aJmdCjmku/Hf73KL7YAjKMnbwB436MlDleeJIjSA\nwZ5v\r\n=oNv7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLZINDLLZDMrZ4ho2xZG1DyLeUP334OhSYe7q78lcmPAiBh+6KG2e6WbUQCLJfNX4oT9J13ulx6eqFrNreGcyNM/g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"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-snackbar_0.18.0-canary.b6a772df.0_1595285177093_0.47666788943111205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/snackbar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FY40JNWQZLJGLf+ISAznwk31qVN2FYpBh7uJiVAE7dzbHHR6welpVWPeB5aWU/YajzQJTWj1tAD10wuGoMpcBg==","shasum":"b6b7a9bc2d80c5dcbdd116c36c5f7800720023e1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.f6a6ca38.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqJCRA9TVsSAnZWagAAyr4P/jo48B2MlVAahHlPMRri\njmYeBpm07uGSERG0mbBkvIj6KKbnTsO0QuMDMuLeIQNcwS+ftdoF1Erj61t+\nhtgCPawMtEjvPqJEGRfno3d7FIsqYXPJ+tWebSvv2owg80ND4oK3waycuRo7\nRqotAjR8cwJ6phrY4rUXi2XAkT8WGmht5ZD0qd6iJvDOnrb+gQ5DFS1Ops7h\nvMj4R05hYWcX2gXvf8A4oJRn25JhQQ5KLcv/H9/mG9zj1qU5Fqn66KCXI4Zh\nZoGAJ5qImbecRSgrphYet+sRFxlcWVU8Kne+/s3wUuPpAFt7SZiUK9G7bPsj\nuvy0OtdSm+H2iCdlfy2HuEEhVtimRczrvgMzfzQTaDs30FO8J8LJeHNGWAhY\nOyb4xof/7A5bUxQuJrDTReKJ/io7305ndmHx0M7jBXkMRE0MzmHSBQ94B9Gy\nB3ETk5qWYsGXWI/tE7Mi0aKASiKcSGHIbRWf7oRoa3bMoR//YR4FKeaQDXCJ\nvY0xvordbaF8UTAQs25T8M+5ZCF+JhNVJfgDaerdgyO406mtQK74dw825hVi\njQV618nC4c2KD4uCX7Yiy5YPWMeWyPRZXm5ceAvek0xOj61Zr1VFdxY9HfCF\nzy4h/Ol1nofumt9837yFBR/NQI0G8nxed6NrCEKvP/RzDpiiI2sxXaIf7jLv\negzV\r\n=nDgj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOVQVAG1zxvpAjEmN09WM6PQmfAPSbvJqaqTkQpf/vyAiAcuVHHSrA0r5sqIfdSf6vceCKUYeZS5bId7dt3jh7NSQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.f6a6ca38.0_1595349641420_0.5837024902306733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.647dd6b7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/snackbar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8HXElWFYckLRlTot8+0ztAckFjykZu3TF9KILln9EMEhPqr2pRncgQtZ5yJN6LI8DTa/EBoMsvdvJTLFfuf6Pg==","shasum":"fa91fa5871f771a145f1df977894068e1a2d1a6a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.647dd6b7.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzcxCRA9TVsSAnZWagAAwRsP/2rwb/RJDUGWuI26naIc\nYYqNHoXsjQ4HZZVN/o6S20y4FhUakPA9W4vxmCsPFk4WZlT4zA006EiAvJI3\n/oKMc1yQnq05ZFmZtzBu9KQItsQdD6SG/QhVo9wZEEAhONKDnqLq811AkbH7\nswPzNBsj5WhIHyYuqgDHIzk1MzYPI0I4OCrb0kTn5Sf2jkJR8BWfnUaQ5cHp\nV1C9Q8RQ44bN9KRhFzSSvNY9wOwt3YxHRNhAOM5WDMQnt9HnocWuBb6dr/Fg\nNPKeK20PAhKVc2KDovKMpPJhqYXOZswqzWB4Xhos0cHxf5LH7D8iQ1ErYtzi\nBuT6oGF6ZsByLm/PSTmZv2O6YRuatdrh68sGqHQG46dvNcV8M9+Im88DUM/b\nFBnaUnrncmO/dqbQwKsPv8TdvQsCWsGHy1IGZFc4pFh3pgxqM+xobW/7o1kS\nAYGaSlxazNzaikl3Mo/HdvTCk4AgeSkurt9tbzL8ZQzQkm6akZ/DVboMSm4x\npTDEPmZMrHyME1+FDSAjsch+MgAdjzsvb1M4Vqq7/y7A7LvWQ6M+3ErAZb1w\nKvvuk1r+G2OOcxj0cNyCVwNuXbVUeuooGUmAyfO8QDsYx3LXvfTXClNY431E\nPFgWGT9s3FA44TaXcyuJY5xHUyd3NzTCXcFa6B6/nyj1jjcXTMnKOp2ALUKT\nzm5W\r\n=wlsk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0AlgF+BJa924I685m/PSihKztYNOS1wlNr/EP/2bF2AIhAIGK9tj293i86Tbn38XzelXUiiuKH/W4GVXaLB7rVVTY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.647dd6b7.0_1595356969622_0.4756354709130992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.3cb7406f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/snackbar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-545rGL1YqGTyoOX6IhxjJCZO91MCwRagGs9p48x9WgO4Q86Jk5MQOr/Do6qcWRDNkm+uxuVo/YQ8bU2JhMJzvA==","shasum":"d7859c20e09ff8c37237b3a57d82916b3214a43f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.3cb7406f.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwNCRA9TVsSAnZWagAAE4wQAJBMbToPdcw43wga8MZZ\n6ITUjYnI39b2XOLXZCjuuaxbiAtSqT/i8WxfA1ri03Vo6IRr67Sn7TpylhFP\n8+rbces0KF+TtzgIo4GeNdDBcFU6gWPSfUAHYIfmKzX45qeuLcBYOTXJLz20\nhd0Yfm+YLu0Ee/QuXb6A/nVCdyzE3U+B5aC2jS8KVh3zbW0C4IT194fNF2cL\n2VbX0/mpjbstwzir2rqy62C4EeGoX2lyltmSB8gJUxN1XQdUtE/vI5tlZj26\nxhHvCbrLhCvhbHPwm3msNxmuWGXHP3ndrX5h+jMcbHrbB8GKZpOEbjDRs7sM\nn4GfpA/BX4bpj1TcijCUN583RDaMXNE5gjB/cTrQPFucV2lC9AtwJC+FydTh\nxO8VKegDcB7LRIY179CaGBkq78MrF1+D1XV4Yoiqccz+Qjqd+B5aAkm/r09C\n/mQiE/LNzWgJYdfMULXoyy72MKq/SSTigsEQbatPLeIK4/+DjJgqL9vnOH0J\nwB3vvA9HvDc6KUrK6SFrw96M+hOwmdvaBywkV6dSO1kaIrpeY7kTjvb1CrGy\nXSOxQqAbTLtoLB3AYZcqVaqYbBhblRTzIBEg8Ijtvtfn/BbznwqLqsJHekYI\no48mdyIxDI2JheR344qerWymi1FvDOkZshRTPPgk5jS8ZASKywhByypg4zia\nBESO\r\n=g7g4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYJX1KBbnhh84Fm8AlvsWTmxzTbqHrzFgpBZh8QZY6KAIhANw/fFKrIYOa6/pcyxbkfsYuTXpbsEMiRS6hvc5+4M6L"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.3cb7406f.0_1595444236939_0.6921402610475891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.5717a5a1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/snackbar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Z7OeED62SgVEhBvdwSqJRv96epEgZpbCSoRnnNkT9u/8OaJByDUMDhvLfVfrJH5dDSn608xmRJ1e1rV9sm3yKQ==","shasum":"c87cea99afc746b945413d600d40f2f2469fe238","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.5717a5a1.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIhCRA9TVsSAnZWagAAkUoQAI9b8ktI2XzqKCXx/WkB\nTx03HdbnzRw7FSJNxvZQzQ4H8iIwFRxwqgaVY5yCFnzEbkoQW2xKPcmcrdCr\nKEUH1lkfptFsLFzvJoqriXb4yGg4oPUUOK6FILJEVl1Ci2cEFkIKaf8AiB+m\nKh72TSZcsOqaiYpDlyoT1hg8gk/C9aKsP0Aq1EV+PmpRWdHjVaQzvLJldUYT\nYJtC6p2QhBa7fzE1uj2ZRE/9rHpqAV2r/rM2BNHAdBq3JO7OM7y4NpvHw/6Q\noLDcmlAC9N7mIhLflsbgoqAizapyGLLLH6NC6M46S7gdsFM/jagh7axdJque\n9HUA2cpJFIoGtdVBKxzvkD7X8xA7Qvon7nhvxc+DB4oVxiRQ239DmtcP8isi\nn/PFzh168GTCHPoGY+aM+75EY96CnQJgW21l2ghikRi8WMyNXOchRXv4nvVu\nPVNnF3+IqsbavaCkc7J7qKCxfZRDEGuu43PZ9aERgKGHLkbptQabEP3sVXcT\n69PC3FD3GLpgouMEB/pOclcDSyCiJlM4mT8Vz5YRPI6sdPo0Iqr9JhJVshb9\nIrPMAZbhnBLJTcDuXs6dzgMDkrV6AqmrnXMYdK1wQUO9ydmscuVEIIoYS0k6\nIMvZo3cA9UjDLNIPmj2Fw4HFR/RDiz5FySKgktL8eCVEJxn7CGzJLzWoSq+j\npxSJ\r\n=ECYi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2Q78Te9TLy37Ehe7qxq6x/ju2f1p/dZk8TMzExxOROgIgKz3qz7Mu7EJv0dY7DmqELdhVdWBUh37eNTfNSOJl6JU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.5717a5a1.0_1595453984690_0.48575563175807734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-AULi4b0uH4ERxQ/TbnHYQeeAvrxAs5RmooUdkPuTlf+Y3NOvCV/H+lA8VJxYVzPXzZ43Uh7jzvMrhzjnogD23g==","shasum":"2281da693628a18152ff9a16d5806a6a15d3ca40","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.d84cd4b2.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKVCRA9TVsSAnZWagAAwWoQAJZTrne0aZ8yd7WTYkt+\nfjJ5WtxGQAoY3zf4zAD0TFib6xfRaV7LWGDvKaCzbdj2kgwVoBCCk57/5vAd\n4VYMDpaxwkibE2cLMxUBTwF4x/PapUjaxsSGiXFUZfFqH+OAFzVymwHRtPZD\neoAEHrhzisDWi2+7gqfpmbgWlZv3cK3B24KMfHrcYcO7js1RgQs91PV6LooI\nwJmRediIHQAtVUBqfGRAYPop9sbcuypIQIGCEzaNSn5KY6a+gqLMm6wMr1Om\nsDOS4tgyxx0gWqvkqG2JtQAEVOJlx4uo/qMHazaCJf29duIb6iote5YoRwr2\n/cIWZBigH4LQNsZkUAqAy6DelmEhJOerJc4Qvo3ZRSY0SJIX/1cPXzQp6Nz6\nZ9wicTJ59+fN7FKxCafUDBVn53jPW4lk7koq7jqTP1H9xlsx+twwPF+/afCy\nrf1TIfhlAsSU0wDfEoPR1ICt2Spjs7bhJDFPEAdHjuhzEsT2o3PT0P5FPC9v\nOOM48z1d8soWX3E94x9TtCsDVf+TBN4B1MVMUmS1Bh27jv2+194Uw+p6ZSdW\nf/mnWHXd78UJkoXp02dZ1Lu6Vg0pSSZL23kkOF7KBMH3ZkvHeZK2oGqCm3Hr\noD1jMSadeVYTGLaIEMhdYRTDzt71JxK5S7vSkvla7m29mXy2HnD5LTH5zMPd\nOAnJ\r\n=H59L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB43jUAuAJUKC7JqNju1X2ddmr/jHsIuStzYoqMzutcQIhAPTqZCErMlKKNK/zhd06PSl289EhY838S7G6ZnnAKASn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.d84cd4b2.0_1595454100823_0.5505204430393849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.f279e7fc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-goSYvX4X18WOOBOp+hMI3mCyueJ9VXOAd38tSMzWXIVAsEL6mU2CbOmoLdVD9EPTXaRTpBCry1h0ZBxf9uogiQ==","shasum":"df5b2f29143863c90a282212aa633398a33ed022","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.f279e7fc.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLb8CRA9TVsSAnZWagAA1HAQAIs6XD5BDxNKWVTumMdy\ncIIxZD38kbAnjUZk3PDMLBNXJxNeM9vJ8UXkfIw68Yq/rudVAlswl8XKExpo\n2z3FL68E9t0ibOJymQYu6/y8cfqAcCEEXw3SYazRhfjFAh9vRM/stAqCyynE\n7wMm28E7otlAzu+wTVEtueo8fizgu/TlLhq2v+jxDdTWzvDQCqL1ClPV1P02\nE6JG9INZPgTMm8WrWqEHab/Rj7MSSNfDvkNmACwuoybWHeoHv15Oex4HyBo7\nKGmgPEG6sbUOa1mkPC97bEpA8RPxiAG82LbbxgA+Qq2oQulwNRSJF0Zkmstp\nj98c0l7Tsly+MopjpgB3RviOeiI0ROu2HGuuJ/kzIDcuyMvCXbI7arJm+ZMx\nJe4tOfEwyFBj5X1iQoCdJaYz0xau4wV8n2Vmrt00ObXZHo2DJtYRQsTVDJTf\nNoftCkTp8mUry3LwCC+xJye89+jvd7yN7LHpp0TKmkTCY8qJ5WdxSJg5a4Ss\nJi+KKExBrJRLrmp4m2BRnX04XsFWDZuPLJhJODzOn7w/nmzCIlt0ZxRnlvk0\n9FkMEDd7QR7A12IGz8jtJPCdOoWJuTur5Ac82jhFVO40k6rvfzigHZEZ2kVO\nqo/QQ6bMyJ1lpXYMwORRmcSIPUR+JujIX18CKRd3ysUOm+S3vprWGYWT7VK6\nsCD6\r\n=xlpa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUm4uNfi33K9GknXXM/TT4/Nac1ZvAmuV3sgMN4QoqyAiAlGT532184V4UGO3NcZNFOjGH0nLewZJHPCR9dptA36Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.f279e7fc.0_1595455228288_0.7900932379312327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.f181e3bc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5WmI3AHi3D1TpkeUTsmOnVTflTmGiUWINkSI+pJVtWBdXUWL+X2I1f9E+Emd7kcIlL407GMTfGhcMQDfc95T4g==","shasum":"c348fa3b8f5a52724cd4f152e9caada99823086a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.f181e3bc.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLd1CRA9TVsSAnZWagAAaMAP/3LGnthsLtB2Nw85meIK\nzaZ0F5ApBNZFpBHV1PC+g2eVBBHqB3XGSA982QjazSiqlH/6FdWPiUNe49M4\npZSsi8QGj2QxVvSlfkA6MgiP0rclBjkei/Wfw/OOBqAsjjRt9/eea6j1SrSi\nfNle7Xuaen5FKWPkkisvwr7f/QGs7Ei9PcdIViTTINVOb/KFq8Nwhhc779XT\n/3lOxDjj1HoFu5SvfESB695ig5O+xFV1fawzNqwAuLqVDbic45WWSU7DBaaY\njzfndxKce5vGzv8mb0KArqxBQKOxPYR+Kho6w4Evfxb7nR6imSC+pz2HiSbk\nuX0zvuPAHNx645Q9yWThNdCk3NsY9w5i8+ByyhMzjK902JZT+iXYR1O1IXrI\n0CjTjoFTam7zhkAUKeHyQBOoN6GYyqHm31cFOHReYhWHVSP68mDiyK9PdDrx\n6iLKLcu4Z8hf7VTvhFCUrbqlpN1F6Rdqf28HSy8bRdWHOP5UcjOsnff6nhJU\ny0Cti9HXIpnH4YPzS052ghz+EFGZEDtD2r658pxAs2IZo2W6hN6lsJYOk+f2\nbPUbUPrMNZhW0zVNNgTn6K9hN8+lUYonmurmH9OZ6Xz6C8tTdzZNzqdIc1aN\nMAMqKipu2wKkcwZ1CBg+6fcanQJdgBVcPCLIqY3wMX+0vKMZXJ/JFpYKGrh3\njw5r\r\n=Cx45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3A3NsVYYY66BA66X7XIW3G1uqB9f3OTkTYoTWkK5lLAIhAJLQJboKINe5GUwwHu/4iP/pQ4YOgJUyNDTAZll6sPIc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.f181e3bc.0_1595455348949_0.7301989610263082"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.346a622a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RGOGdR9I/SPz5x+KGfVNcssLjGsOYAqyj/efS22iOmYSgjtegAqXrAZ1GTlF5lI1qPhIh5uTYOworsaT/qtNNQ==","shasum":"ddcf0d7d3bb8cfcd2d4105e434c853de3cf9f8cf","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.346a622a.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5DCRA9TVsSAnZWagAAAiAP/3ZT0r55djdj0Awu0BT6\napCcYh2/BhClV6saKLzlEqcx4pZKtZvQxJOI7tGwV7bOqYnN0HIjfbWIM/0c\nACPqcfQ7tJtnpdd/HrpZSae57Js/GWoCSNYF/QBdMauNk8WXAe89h11mGjx8\nCplXapCrfO7xy/AK2QDgqi1BcrnHZCjuUqDvfs1WUt1zNUcXr/4aPvE46I7P\nVvRY+ZHGnbSE1XIKZb3VZh5lbG+oReZG0H5C2S9FDUwDMg86GCSbbKVeaxho\nOWNdxHkEFEOsyN20bd1at86X7D965LlAKxnO0XEePf5HKO5gvOnqlI/YkKwV\nWAjO97R8vvs9ClRAppNnlpsleDd8ajEcp03i6ZPyx8gRKg2DZEQm7PVfOpsW\nuZY9WZ28CEr0CPfKm4QbhbbLB6zFMOa7C89kVHrhvKvZvX3mU6H+0AAGyQu8\npVziM5GJJg2EIwDEJuGprHlTEmavLvjUlpuVYUZYmnzH5TPShU/2KFRmTsk1\nFvuMNO0OzdBDCxb4uAOjD7+z77ZTlJ5bKseFp+ViVewqyqzUwV2GD2yrZLZs\n6fh9KzJz/mCw59ELnukL7wlIc/5wnv2Mz87LDLBujK/70PkclB+Gq4EC3pVc\nmCLY5ylZKrMVXpdWF6Zrq3x8gm/HPQDg467bF4jGFJQUpOgfKR43R7G6BOE1\nCuGy\r\n=w0Jz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6KP4Vi/WKvelYTiyaFmqKCysZXXxIqTvmkK+RceBnmQIgReGQ9FfTSkaJ+mWNGQQi87xt5nNzxoHaoUz2+Xea92o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.346a622a.0_1595461186591_0.5953397636120372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.c9e8a848.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OZ3rzpoqarOgF3465jjUM5BKuZPK1BkzqNGWFVQ4lYivEQ1vwiY7FizPzRnwAFuZs5Tf69fwHepDNyaIgE40bA==","shasum":"e91dff9ebb7921762e8fe892dcd16278fdf8c465","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.c9e8a848.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGONxCRA9TVsSAnZWagAA9PwP/1P1zR5MotMAjctWjsXa\n1U7wR5QcbBQ3+BMpbzLxWJu11p6RXIFRvOklqwff2YdE0UZI7Bz0U6RKL7fD\nULj+6W3Ay10qguabWjy8zl5x9sYn2o1Lf2zEt6dOiN475EIYXysQ9+hEsQg7\n3gHf/e78RGgRRetI9+DQfA31oBwQJm/4P9JtUNVHpk29+07GxAuwp3LhjlZk\nASafRe/Z68pWhlR0ezFgIhrXVmRmNk0E8NSssi9LGwi1A1scAi/7ij5Xdm+V\n9V+dU8d0HSq5taOctz8vZoEPRevBb0lK2F4Dc4KBHfL1WFUUlOL/0GCFgGOr\nQ1CGsTkTszi1aQzaarKbvHwngALIBBbUJS6Yr0aUGq4gE8xvhyJzeUiOBJP5\n2kBgbLBQ49CIEDyqc24Q78SCDm3U7LWW36qAkKLSGjbvM5JnmSSDUDW4dRvT\nzYTFMQy2x8h4H1u44wSXh1rOarqF/OCFu7bgdIlNhIjaplYY+m+rPptuIbKi\n0BFiKvdUVponelW2B2S+Nrk/DWg79kdwg+Ku2+J5VmgdQe6WRCAcOiF+ff4l\naAZQZKAEnIQLCnrCEKiKaNTbDIo7BWwX/tJqWLfv9hIv4S3c6asvIfCe7PGQ\nDuTgL3959vw9ZIOIT7xpY/0c1/g2xRybkArTcZiKVBfb6rTMnwz4NvaZHSJ2\nmvnX\r\n=ODPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUYKc5HLudgbgdS8NzN5+KqGXvWfBcB5a/XqEjwBbxTAiEA1tgTIxXa3U+4DnA7wGIPoFRcXu6yVgLEhvukk0MSuuY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.c9e8a848.0_1595466608932_0.0970206316453508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.718c385c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KCktEOwN2lXhq1Ol7sm9fCPT35nqTXMLMQH2mPZwg/ydcCGXMoGBi2rLXgHbRuK+tXu1HHctkU3fJE0iY0glqQ==","shasum":"15bc5309c986599bbcb1a9d30feb2383e6f28877","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.718c385c.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe20CRA9TVsSAnZWagAA6PEP/RaJnKxOXyfflNwU5hnN\ni8xR4iYxCZm6RuYFO1knio4zYPRwCbbZ504tlsKidkMHasRWfiwMcTYYLdIf\nTc3PjhvET8ZQW+KAmx7BhWfJI3zipPEW6A/PblIWA5Q/1mnFUmKaJMlMsLu+\n5vqY6t8kS2/aYU2Cwdwc7PZy7GogZY6JSYIEZanpfAXvcKQCP3eXpQynJLNM\noWqG1Az2jx1ZbdCCchQ3TLk+dmEL1nWWIYS1ucOgn9qjgjm+9GVY7uNsGnv0\nRu9WxNwvfUlQ57TNwsxXwcHTqFs3jchQAtMzgvJfILkDB9HcgwEITmLZRCt+\nJVBGgyJCJwywMfTJYwwK5aDMcKVTzJDw3QmkqOW65FZ78DH6yOvthoLXorAt\n/WuTmilUBfAhwnEKFlF0VndUYy1PmAzUKR9dO3Wt0WqHTP46KSBbrIGroiGb\nQQFvA2i0uMK4oFWyXBAfI/KmHydYEZ5OheLWQsnRIy5efRVSwVssifvCdLma\nSpBvszNJkpyM3kfMieZxEHmHr5jvFsyrxT9WST+1W+MoDYDavxEjFsQy34MY\nPfTQFu2ZT8No72/vZCPd0tou2S48BleJUdUjKNBlThSDhvlphhO4NyHjvWM1\nZLxV+dGCywOqvPVp457Myr6cMWPfxSe+GjRW6iYivtwbnYJtcBPo5vrJhTJY\nAmji\r\n=+i06\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUBr8bBdEegG+LxsDDVkRKWew2pXdzYEgQLcQloj+xdAiEA5Vl5wjvDY6uz4gn/s0coWrDuB0fqsMmvN9yt5gbAiyQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.718c385c.0_1595534771834_0.023361045365623667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.cd516a27.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ed6LVP929zOJsLMqdfXDRbFlOJL70BQwBwS5N1Z/UH0GjHE2IBNwshk0kRwqTNO6OLJN/nFC5j+wZeaUDpf1YQ==","shasum":"2fce31469944e5b158246ee99181b890c1de98fd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.cd516a27.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzIvCRA9TVsSAnZWagAAOGMP+QDJfwPNrCFDGbZGtrB+\nIGnSOKXL19dB15HcO+A7yHCPX146zqOU9m+Bv+hJin3LTfTQGbjC4b+8dLOk\nv9CfBLx0RDF/CywywQCe5Bg9h/do+iPsmux5tpyWzlP6y0RnTWwoyXCIzPAD\nufEIhD0anqZhRKiZWOr9jw2+YUCIJA/KYJGUC0vy44F60b96+jhyCzeNrU5n\n+vnpha6FL//mPfG2BTa7BQWn5KNnIizJ4jSeeX5+jtz+5afPMINxu4a17Ht+\nbL8tamAJP5sZClRO3oqntb4KfWUMOFrgpbD6gP58kqEqgpyeyAvMtfwRAHyF\n0mxgZJX/MiPALVmvx1nH1YbCBTLPhd2i2GdGNJLBcq1rHPeAutGRtrfT5Sui\nGtf/ch6Qlzvr42Q+Bu2S8LFdk/NTNZ8F5bZOBz0mxef7arEF4Dq15rtV5aQe\nZt5NeFD4C5WIwcXkMroNmKJ1US2LduyKm8HsCXEDp3cVhziyXIjic9au7SXA\n1GlGSi/m4MIwLcONTApVq6KEfSOSOBEN/Wjwij+/NvlTyE6R7+p0Wf93oqq4\n6B+gcgwkeP5P/Q86BTXC/hEZb6Jqs9vpqVb4zElFPvbUAAKoQW7B4rXwNN4A\nIhDbR/SBLeAawUqZs/bdm/yrETd5GmfVCuJcTYzbWmKcjNWSpn5YmlrDcL5O\nZo+C\r\n=0DEx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKRbs3BAuWLG06qYNQzGv85ql2aRp3fu6LXnOb7ANv/AIgLb1Tr9CI0zi93xUAQM4pgDV4KduiX5lryv0seK7yuww="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.cd516a27.0_1595617838752_0.10326655476878188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.1f082191.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pYjLdZodk1p/tdrXp9aofoQ8X7F5aa9ihrOQqUjTl7xfSmsU+KPWU6x8cV6MkXPM3ZmBPy6BHsdSn8eu/0DluA==","shasum":"71be41ec5e33958e13e0896a3cca237e47a3a3b1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.1f082191.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzNrCRA9TVsSAnZWagAAL7cP/0Fut+zFjUt6GD7/leNZ\n55e6kNZCwkrpZuqUSdcy+tPl7OyeDx5PBlrTDCYXFyITxZ/yOymZH5TeIYqA\n7poDVbrbTJQFtSXk0DQaKZHZqbbwttyaisGOqiZLwltPuPgxrMkAp5xEwXix\nCluht2BDzEpi5h6dXXzy/7xHj7CsHLRYe+t/2o6mrb2Y1qurzNuiP2iY9v+n\nw3zSgogF6bSy3XvLLtAqVTe4hZyqJVcY/1Hf74IQ7vX5vvBTAwd0+pNyw3G9\n0MZy1k50ZfdqLS0dych1j1HPMmsAlmPYVXdJL4W/SZhFoA3cFDyjdc3zwYHC\ny7zNCaYeElJO3V8L1le9yP7XHe4SDWQlgfsByWQuRmvWNucNjJdemHsAlM+b\nfFebpX6ZuEhaQYAmn7I5JTxuTt4aLaa3ieSDgavDO4lRl+vDYCLFtGHWT9hG\nP7P2hNbCQ1m14xp8Xq1fkoC0+/xOf6D7PquipSPARpqypvSN+cMvDmmY+dcO\nNAPdj10qeA08xm+LUVhSalbee/q0k8hJcMExgzm3igWRlNbx6AsPF7M3TDn6\nCkJFPxe02Vg9/LbomNiJUezmI+9AjhhIhAVPt8suCX2PFPHFmP8W6mN4fMI1\nQwBvHq7LjcIBST+gkjiidE3hVQH6SFEw7ZC4gSrJxm3WRipQ3tMqFj1BMvAC\nCDo5\r\n=O5NQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp4M0pQPnrlL9ecWCH8Z6OA8nPKRe4Fv6ADqFbz5uzcwIhAJNqiHfELa1QREE5SsbZbiMwNFWuuMgq6YnLmkR2LiFj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.1f082191.0_1595618155132_0.08886836034827383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/snackbar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mVSh5I4FEd9iz2/OfjeK2OIKit0k8DLudTsSB+ah6jruF1Vbz4Ikx1/I1LS4/PKZUbd4DN+HoG8NGmGM/mA2qQ==","shasum":"b0ecb7cbc1c4c8cbb03809c2d44a174597bb3c38","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.ea3e82dc.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSlCRA9TVsSAnZWagAAcFYP/285QSAkb2GJtWCUuN2C\n230u08RvpgWu/PKMjV5rt/xAJKoe9ROu4o+h64FPC89WI456ww54tUEOomXO\nGfomgq5FDCQnjIppay6jRN+FJjFH6HWoXeokgkjpiYSsZ7dEzQtcZXJBLsxa\n5aTybBvhlHTAafoR1FpO4k5aSR/xRtE/e/xrYpByoY2PlkxF9bppRK8vagvc\nZaZf2tdH60yWrPScEjr8AVioMXw7lYrmqCzl/Nx15N42qyuogA8P7+gG0CcQ\nFfnoEQkFj8ZZ1R3qK+PuZF3uDgpFi0gIxt5q/2Y3n79b1Ybr1fyCcJc3IUd5\najj9PkJX7Ywcj4MRv3AdI3f18fs399LkROg58vOlM12ksKRv6QgKSLZ/wkpU\nVqpTcKlLi4T3/a2BeH1s+gKF5FyA/R/8zJdhVY5zHl37GnIifY+uRgmkarUB\nxlXUa7LtxInPmGgtH1yIOyNIkPyBYF0I0cfsDgjwobfzlmAKkMryyRSkkHXQ\nR0fVVNCf+gw+uAJ75+tHelwvHDrP1EgjAGbfDvtagn32A8kwsQ7FeP5QxWL3\nrs6q1wdE9CU+7B/BgOi9Ey/EEUEpYudY9sNeoqhbqLdJXCQYUGFl/18Qq4UQ\nZ2fofbCn9h3XhxAjB7MxS65USSuqpqROgYBR+GXvxtYMbi+sqLLQL3tUMISM\nf/WS\r\n=3lF5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc0MgIHMJIbGzceCbyzpreJAUPgXTuObgTNDtn7B2mggIgYuKdKS5ovx+k/GK5D7m2GqpAhP6Q778WHKb1rh4uPDA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.ea3e82dc.0_1595618468854_0.31678464425577135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.94987b64.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/snackbar":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.5511e0aeb.0","@material/rtl":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eSU+vT3gdR7qqrH9aS/BrE/ygGPp7SMx/VC68JJkQJEH6SzL6J+6lO84esGGA669cRwvjauu82X9q4TBP6tUwA==","shasum":"89b39eb39d5087f3233df1434e55c0b48c97444d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.94987b64.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0PuCRA9TVsSAnZWagAADJkP/iuajCiZHMHNjU2/oPXj\naF0AeV79MgggCWw+xlysSi9UN9bzy8wyjclbgqLLi3/6jIYQMVVI9/ducv6r\nY6+TQi9j8k9v3UPiXjLelGjiASHgff1nU6BrI7mEv2nNNuNHeIbnh7JJZ+6v\ndGN3jerTlJNFuAwcqj1jOkbxK6vCmQc8RUIMtSed3ts2H8BMCKc2jFLHz0Bp\nQ4TpuJCwIR0MWuW6tcOPEMe716A/jwvOGbwQHg6FDA3vum0bwm0PQN17Mh+z\n4uy/20BnDrnxMd2MoU+Dyf+wrAxPBoKc6cjq26DKTKseK4tPBviFrbXql0EY\nmhF0TiMG/+MrWTbGrPEoYLOwAqAX+X1Ti12wqxCNUHamIQK91GMalD0up+UA\nNZU0WKIOsGHDcn/GRKDmf3sefaA9iVJFNL1SbMxDL4DptEcfT9E/P+Rf+32/\nHfw93W+kzudALId1hqjD+MPQL1/HOc0rnS2uVkUNJSQ0nbw1kB7Dye6yXPw+\nEnCesu4eTPTDlX+W0Oech4S14oLAtgXzeYwrl2FWzYW6j6GqYZXb50nDW1H0\nciScbLx3XWNvkEEUXyZVB0G6MdCuFCFUIYRHwFrmge6KBMBWsqiZ82iyiXLn\n1V9RvyW0mR1jpx0BsskLyZy75pmXx07rTJWTXW2NFTx7N80I4j7q8aaUuUQN\nleQR\r\n=bF7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQPPT+LX7YL9Vi2hJphPcNmU45+Ktk+oB3A7TXxOtj2AiEA0RTUntlb/mMoYbGyV46eChrUVGEAsBtiFPQgERXHQ70="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.94987b64.0_1595622381750_0.6649831740554102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/snackbar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Q5IHNzhRF/h7cOjYyCycumJc2LSYeK5oOtUpwV67jOV+wVGOJhRKsI1A61LoKrQuYFDvvK66y5l102t4r82THA==","shasum":"e15c26927d06595ac11bd75ed8110d7ad6aa4130","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.ff49b7e2.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVHCRA9TVsSAnZWagAA43YQAIcrupt5HrHUR8aiigSL\nhP3gjAH5Y1yBvwWIBssNCdHimkjloHjcJGIg6eLYtWAjGg+VZZKYUgLDiA7/\nRq3BnIRcbYl62ZQAOMgiyee0gaPt29yHPB9/ow+oKW3s7BKEKa9uYt4Y/dte\n5va8Mx1zCvWy73KGYDSa4Cii6g+FVoqXLmcu6uWj99W43GpJE+5s3/1PD2VZ\nvPiH8PiffGTXyVEW17M1OdZIBQDxtXNNXo8cWlXN9xwO6z5qWslx9sB3Zkdl\nEPSGTw4zx+YUOWqv6VdrKyQL0TnaV7dFKalWbGgvtZz8a57i7JsXWPuACVn9\nnbS3625C3RCNRCbohRDdg1Gw1qsNP+t9y1D5iV1s0VX5YRo7Noi3ERM/ap/p\ngWWf0w7IbNHxgQfmpmEwOxAYge4DB2nDmlPkhEDOCnaMBc6Q8chCKrQjGk+r\nc2JYe2WRnmUOk3ZG64IReMiQg3Lv1QyRQnSD1yTumRsvDDY0AiDVFr1gGcip\ne15CpgDaBgfhAnUqNLz3aAwU07nwrVO65J8fM+beKD1VuvOL5tSrQLm6CcOH\nxTiZ4nVh2VCgdc5+WsIFgtaWNTkVaZePNJqrGHSk3ucmPq3sUp3od7c9Yzoi\n8a4gfXXZnSBCg3Z3xeYxgn3uLApuevSzkV8TrrdLrYh6I66U/fxAdlbvf6Oj\neazr\r\n=jjZ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbBtWAagP1zFsoHfcbPTUwJo1bET3A3gRNBBWnlE9yswIgJ+9h1L7+AigOVzeXD7H3fO+9ryNIb5txyaRZBwt4jKc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.ff49b7e2.0_1595876678805_0.7604078982291036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.3d334ccc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/snackbar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GZzsoaCaiyu9npRTmTPvI46cVRGIw1l5MCeQzdGSl2Er0UaeuIFTspcjTQJVPPTx8YzfucPEg+MCjjmbc+IYKQ==","shasum":"7c13a0415fcaf9d5cae0ad33f9aa0c12535256b9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.3d334ccc.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8CCRA9TVsSAnZWagAAZeYP/2rgqPboDYHwQQoefZNa\njETFChZTNdyyUNntJU9uHznn0Hq4KjY8XFEeQlbZHhgdvFkQNK2ake9MUURo\nMcIUjViV4L6JnKejPMCTjIW+TmWDXOPJ77kvynfZLH6+cA7LS4WY/eWmhjjO\nSrjSaARzuWND99buxf1wwGD0PYyH2dinCaMR2mYNWKmAwBiyexXhK7Rmbqh0\nnz0F9esgzI5nu9C508nLPkaIi5WkxpgD/71uQ3RFRwxDNi1YT1XmIIS1EBYX\nEFAn0VdaKUYc2iO91GOUw5relwTOvQ12iNY6BZAgP/wBR5CRYzHV/7He+cZI\nrQbM/GrY/09gXmidh1fBko9Y7xrkRFriRZa+dB3oxiaabIuocD0WNtve697l\nDGhmSrU8xAWoo0NDXDyaLp9EbAAqiCFpRcON4l+eEGBkksxddyVetAP9GuVg\n9uGeMK9aW1YEt8DUL2PsOycYKMs9hJ54SQ/4kdHSG/OkEPDrxOkhZBeHWPf/\ngeTb/lFAAMZfRVeQL2Z7OlNdxu2k9M5I103stpxUHfQj0typ0QzbE5PHhr3q\nfxdJr5hrUyh3c00EDacy5Za5fAztD0zi1bTKaTbY/GTC+mGoDEUNi4AujFbT\nI89hV7NVQaUvZgKe+4TJFjeNTvodl4AhSvvjqw63NKbeXnqU90pa4QZsyqLW\nmt58\r\n=rRre\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDIX8i5HRTdDKYFFjxLo5b0SE12tLYTy89m/lph0ViWMAiEA5PlRHSzkyiRgfdzsL5zBb+X7agTwPPcmCVI2I89ImyE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.3d334ccc.0_1595952897519_0.21538728317435685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.82ac569e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-y1ommYarp4KDuDVyPObsz6zraSY11T6VrYktXKk16zWK4VRsKP+S7Uua/mK/Ly7pmTnWHZJfQYo4mqRvQ0Mj9w==","shasum":"445254ff563d075b263b774ec8a43961a4627439","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.82ac569e.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGHCRA9TVsSAnZWagAAYp4QAJZq0CXe/MX2zjWebTEv\nk1v9yaMRLtdiPiXi8g71JdzwAcaLKnPagjEg2wmjjc0dTgWijKVi5Zi3tjU4\ntX8U8luYpjqZg4ykhySdwxqmGgI2mul0hv0d5HLd7aTQgNCFToXylTnVuCet\nHivMNxRuLT4VHRb79Ds/Du+PG+TuSFPdRYlyBYubs5ps3Iiea4eoeSyNiA6b\naNYV5a8+OVU77eZYJnbMp1O9ocFpTtRBX+QRE3t3kC2t7JYH28UPhYErfdtE\nbzE9W+mBrwrjQMrWIVp5XqTOJV7wYlXD2AHcVYU5FFF5DPtZaX4gXj5m067f\ng7FSaUHkBfh3EHcsgPhMZ149s0/maPf/arVnyNkjVjaiDsQaNvtYLYk5TWOd\nFtDM0cat8aHh/mwXq10K0aWxResaSHsuGykXyoB5IxZiA/0P1HMm6JYxKfVl\neAMsDQ410tMQgabudxDXFveSe8mVXazDiJFviUtbMnOr2tTM7QgsPTWNrAk+\nNXTDry22SGZ5AdkPoLGQQTXnd9C0rCF8AgSkZOjQ9z8VSyv94ZAEDf3J8eNQ\n5M4i9cUkZ0lgz9qh1z7MJq961ydKmhSq6MX02Kr9WmoYi+87uoS/b/q6RM4b\neFfmcEOigoj86u099Bsejetsp11o+4U33q5tzBWzmxYFfxfIykdN9D84nco0\nFPmr\r\n=MSlf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5OfvAyvWqVMt1z6hOXH4/XDBxywcWaXKMemBmvNpHcAiEA58bj8fpLHSdObavHn6YSXlXPdN+2vz3tvKRv4i0d6rc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.82ac569e.0_1595961735430_0.6271375483414057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.99df7397.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TEpl1pIwtoRkmegaehQFr4/mRefmqbZAXcmf4suhaWo1ZpYu2keP7UGj4j4YdOuz2I/B4H3B8bkx3E71cGIptA==","shasum":"46c379f65008937fc257c416ecadaeaa9f6d8570","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.99df7397.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGQCRA9TVsSAnZWagAAL5EP/1sHGhuPssngkWsAHrA1\noHs3wQFMpPzcx3rtMhwnr+CTlg0bLTpfNqVLVggvpzA0xYSwk4bX2Lz7jEF2\nZfnT81rGs5JjBXyuub/NWaQ707hm7f02mgBSpnfG6Wkf/iY3ztwMY1wYrcs2\nXzIb/t0k/HD6jqDoy5vvVWn5GvjziBk8U/BXYOup/c8naL384azAnntqZexu\nP4ywavWKYFuWFE5iG/nhhvh23DB8Vw0Mo2enRwarWHre9jv/52FYgbuOnojV\n2QXSyeEFmjMTUnQ8IvhTzOJ7wapHoZBJCBv1LT2615RPrln4y/kPzkmo8Hps\nY9v4QJofjChvUQbUgpoB+Ja9XCdpaPewMyiyHlfYPv3UJZzgzFBxyCel1/hg\nc/tLM961rHaCc5CkeZ1XbZndm4AVb7KWbS7cTNbTYIivJkkUO2UsKL5wlyM7\ndtg3rrR0bxZJWf5Wz+BLskA4p27y2ejog/WNQXYQjvEczD/RA5MvrosHqGRZ\nDkQO4GFHrp3W16Lsr8nKnbyEhnxeKX69ZLhUnDcuzq6t+c/4zqajnpxIEln+\nf0SJqmW5HZRK6wi5ON9+REYdlwREhCVx1kzsUN0DedahXFbstEwZhrKamlyK\nbxra85cN5EBmtGDh3VfL+g1K7bxG/s6xXMUWwTALgP5sZq3NN2CqlyFr5Mlz\navB8\r\n=jsYG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCDTy02FPhbVOFO+3LMxh3HGhQBJRUN0dv7peHTIvrNwIhAOzS4Sl2THoTk1ywQKcEmI334p4+x7UEHqA1smqv96WK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.99df7397.0_1595990415660_0.8674925521083756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.45493e05.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Kzh3UPQLOLgxuECvbiud5Tc04WaQUeVwDCLRxj1BmnERR7E0I4aZefaY6MBRCRilALOOa5P1QrxH4Gv14LTbfw==","shasum":"d4205d6640037512a050523bbc165c356fff4a15","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.45493e05.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7qCRA9TVsSAnZWagAAI8YP/RiVDPJDRBJIVych3CBF\nPXyD74Z0c9kwMt0E0zDREe22gkE/ww6zEjwdUq+h7hM0LpEci9iQKvlAzIiq\nuMoqTK0Aqe2Pym77ddMWjCGmK7gzRRM0nlutHnqOK9LrEyY5eVstRsV3FL5w\nIjbHi18BVlqw05IhCVOLM35aBPf11IGSPHSaEYB3PrRCaAzPmpJPtWwuMJg6\nLiPtAXIRZqQYAUc5jX3HcDp1xvDtFV6Z6r3vgufZDol4bieHiz4cYQU3t3bd\nUs/a2b5f0DmEXKwpUDpoN3iKa3Xd5pqAQpA6pxITSr/YbJEeUhaWiSWRZFfT\n4zOhM7ZX169X8JaSFoZTINRFrV5H8RoZD6i1vOyB7c+WhFkGqh0Mh0IjuhGU\nVUHtfucsX/0Ht6Xe9yJrRw0dNIeQ0TZuWB6hlYGRfI/3cdT6tTiP81l67VGw\n/x2j/yHGFJmhnUoMk5CAH1t2p7QU5Nto8KqdLuyTaMsr/G5jGOmwzBzPAfh4\ntpOgelKiD2Rv9CXFtrHejUYT/XRZmeFgO/pRi330ZvhNqOxlzIYoYaR1VMhe\nIkdz1tuNIUPvZ9BrQCmI4ao7LtRAuD/D7zMkx24mvlvhu3AyB86PqN9yr4Lt\nqfcBfTUUMUMq9Q0xbZhUBc2591YzCD2hWRWfrZTISmiQRNRPiuqBD2z6TpQO\nD5Vt\r\n=hQlH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmLwlP2yO/YH1a55WjdsTd0W9ZawhZsUfqDC5vszNbJAiEA+OhM2jnvIHkst8B0iL/KNow4ZQifaIGXohMtEhNJQw0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.45493e05.0_1596042986206_0.3163410445639212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RvHSb1J1jLq1GkfsVoFVMRLJwh8hLkkfcq6tNtMAxUWLaEFZu/PkfYA+sekp1bkFWOpfOOTKPn4WYG1qC1k5jw==","shasum":"d4ff0be5ab2954baa9b589adc383af7449d0d5d9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.f2ab0a95.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAJCRA9TVsSAnZWagAAVbMQAIWSeuKpYNdwapesCOrp\nf3sKI432VQAieQNhMZ76dPWU8cvC6qTN6ZEFm+kXgwccPEi4zuKykIY9eJpF\n8ESyeOgmS4Q54zsntNmdt3nZCoZkaA8ZUXKAC+y0UqsK3Qsf8Lkqfux59F8c\nLdwhA07HSQ4zBEqiMGOm6K6ZQm6yOyokte1Impz3xXsAUZW3AE2btu5YteKU\nRDf1Rehfzq54U6H1cxDfnVg/fd1FmPomvxsTqrmdt/ShM3vYbBKVsmNqGCYg\nkFlV+hmSG7/ZEpoWEplkrG/CyRoot59vWgGA+NIxO63S6HXcA9s3tllP+53b\nLB8XG1AEmWpkxJJElGjPNn7zZKdMxqzGeehGVxXbwyCRN9FXEs5D3N1gjowA\ntg6HaV37zylGkBbdjMbCRbROXvZF7mfUc2aFZniwC4nEd94JX8v3/mzxMkzD\nj7V9bYN1sayrqf+4PLpShZkXO6PPEeA3Xzoh1kse8hpMezCHpR92X7NMn+OZ\ntN3Z2XguEEZe2tFN5ifKaBZqNmjh/hkCDy4sKMDVJQKtQFUozjo2Se98Mi6N\nZp2cOjVOYigxNSzione45sRYGDfRQMDvhe2XJFPO16kx8HKR9ToT9YfyzhMz\n97lGiBomeg4UsSJPeIpT5ftyPjyYUXDtYFVW8FMXsLA+hp6r87BpJillmld3\n8vSt\r\n=Hdd6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgTEHDJpcmTAwj1rd6l1vY1U1ORHzbG9QNYPr2cyF4gAIhANs3RXKleXvwpmdGnkjUmCw9tBCwFuXVpZZZeBYY7ich"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.f2ab0a95.0_1596043273452_0.15457849045094063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.45f9eddc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-X0uThFCrDqpTF2Grrbla4QjPn94NehYNENcb5D5t9ukv4cOLl0T0SgNWbZkRAs9cmrPpNNMC5RZi1Uru9tMpeA==","shasum":"f9b27c1c2a775e2f6dcd1c9a8ad8b48177c886bd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.45f9eddc.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpSCRA9TVsSAnZWagAAHGcP/3a+xSF61eedYURVA5Nb\n9uVFYFBkb3GTIAIqHWoET+f6ERKGugGUR+caXmlojy2uWMOYYGOG87Y/nU1P\n5TpKJ7l2pgS3ouBvG1Nhl3kXfbb51RhMsA0lrnldHIygqLoOWIu9OfIQlihM\nuqUXbB/vJTbA7KqF6SkOdRli0AGy7z1fGx5kMZFCgDNHlQhcE0aaCDvCKm01\nkAoEkLq2s1ITG6n7HJ7mAyprEwV7QYTGqyx/I4XNEvQ6EMKYCrOVWRXf6nJb\n2jTg5FiJQOoVaXHYDguvHPft4xXiAAm4eXYc62xLQ2MFvoeqF2610A50bUzW\nLsy5jL+yLKoG0ubOTy0FfO22ZlKxHdn3P9Cm1W+hxGzVLulSIPjqIDnlnZA+\n5YZ84BvYZ3VfuF0Nf9tnHaHn84cBcbQT63YiMOj1eKqeU3jo47NIbIMNuNUr\nnGKXmihO20uZRCCRrkrWnMwgnSAaCuDSqi0WiIZvNEWT3K1rIy8yzx7jd6vC\nkHwj2U+XdtOFxp8Gw2/LnAWr5TAhHjyDFZuKpcwhd4Vcy5HGvOGOqfU+805Q\npsNecOoCvpxO3+wF1XjyhG8xZ3FVAZy5zQjduhwXd1ByTpUHwwQxvFK5Xt3z\ngKC1mKle0YaHmbr5Mo3+wg4VpoFxyAAiV03/WkFGH8n/ZaYKsc+PSUV7TXV9\nL10P\r\n=aYGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOiWw2M2GjgqnMJhSJri0BvG51Fenfu5KUnmeGYEH7AAiEAmrcXSNf0nvP1u2sdKAkqwxi9yNcMjT5G76/GpdNCP9Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.45f9eddc.0_1596070481515_0.1131846091484503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.b64663ea.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VsGGTraxnVn0HmMicfHyA3qDRLS1LcfDQ75x82JbOwt4MMNLGUpIoALhB08NwFllXops6oMGWSbkT3HovmJxuA==","shasum":"f9b5698e3318ddc1a4c7865cab01172f96e08622","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.b64663ea.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwaoCRA9TVsSAnZWagAAbagP/1hfle4RXgVaaX0gEeN8\nr080CaCafBp+8PjKk/5JD+6dvtnpmELLUBn4G8FEmQUvU7GZNA8WXbAhgD8o\nd3XWl+0waLSC4tFXI7XbZYDoQ1iyz5+t177O0k9pavWUYDThgTixZmod5a08\nN/CCGa9BGSN3ROWWFEeWxR50W7iZKwOCq1xVa+UpNhH5EwMmJw2Kq6kwms+M\nTMR6Vaa8H0t9XBRVdjmvSAUYDVkAyJ8cm3fwPVSsYzxOm3NF/bZsIDzy64yG\nOIX9GNVlL60uGiK6+/obtzbwCJElp51U2mMQ9YqNIJs87CYqIFMQvH/9PgKv\nqgayyISTo8VCMEWhlMWgQFIEMu2nW2nyK6ZGNWFXILRcfekGJZsUvFCiy6Lc\nm4ZYcu4dzgECn6TLFCCY0FqCdyZLV7HnaQuOdLkZQ49VARbNcjQyEZEtx7Oz\nJEwv4TPleCt3ztTMtm5yHk9USVQxK3/B5qEuPdGGxnrvHUP9/FxGotX70YSa\nabtI5T1HzAiP30zkxjfwpcb3jPaZz2EzOIygtg8NWCqejBf5IDJUFOXzB1OZ\n9VgvIJLp6QTAnMQuhr1lXy6jQpd2c+fdTjzXrNyRjtSMa9oNPJPXM5v312tt\nM+p2qk4HYCJKO+68u05S8OfWiMQflDE2xSUlekwRDY//+Mx16R0w5hfZq8Xi\nA1sj\r\n=cEdX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBc84/u87KiLmy9A6NsOCecl/6qdqSBMQtWUYkCXifQdAiAi0m/ttJ3GvvS1KSmNnSmdTpXpCjzpSR61QH3kE8JFsQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.b64663ea.0_1596130984409_0.4329717602011034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/snackbar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-e56cn/D44XugbTKwrbK7ES3V7TvY4foKxr1BualUIjiDVlLrxClMSARjPV6x/B1y7PXkRg1VcrBgPXrNOWPqAg==","shasum":"f491097c8791aad7d37cecacf68e03102908dfe9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzW9CRA9TVsSAnZWagAA5UQP/1EoXsmCm1+seW4jrMfZ\naFuxv873YzXH4Tpfm2AGuP72NPoDKSbx1vW5mZ9X/0SWM40Ly9ZuAj3ZqPvY\nRixxiYM1x7vQPvQiyYyR1kWRYTXRTXF1DT6Sey3REi2IqUJH33Y0x6LZ28U2\n+oe0AP2zAyP0vfm1Wlug0vQtU7mzddoZVo/KW8DAarIFINbqT8YZYmwYDFLK\nN+o9fAq5M/tMkk+Hwa4VGlhgnKAzfoX0SHycbNlzgc9AdSkuki6zxOds0Eo+\ntoZ6GXTYKaW4vPEWaFhfujprwoxDGN48d+cf1fGdUN+2s0jN93H9TWsSFWDb\nkd9U6sy36Xoj4j/5TyzTX2J+KZtVqKUvCMLELVuW+zQlw4IVsybvDEVmTOI8\nejc5jB72dLVGoFMWA0NQrr4IsKkJWYOpApcgutEmv3WyOju4mKNF70tY+1eZ\nKeaYwRBUJ82vuaTHcc3JdIQ8cIqPnYemgTcE0UV2NRHgIS29W4B1SIN3xCzp\nxlO6XIvzSdW5lVDKyJpXZg/ryS5yjLZHg2pZLxHTRnqM9OCSyaHvzxzdXUhF\nI7v9qsS6bX9KJUTApU0+A5YldGnk4VJrZ0Twhhu9U6Rf7EetJNZzl+sk1r51\nBnX1WGChvgmns1b2+mVLbsEOIDZMwhEQRwD+83e0TM0xP38HksXYYe31ykrU\nhySp\r\n=WUCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHBScSGU2F2XcOIi5JUI40cojPjcqbPI5lnO1xKwozJjAiBdmbZGZD0++teh4JIlCnvqy0IEiglzxwx4xt2P9BccUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.9a1a4d2d.0_1596143036836_0.6242572343998603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.887c2848.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/snackbar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ka2qql5aE1dh0s00I/FmBdRgYN0abRQBN6tR5htwD/Is+IGK3S/CkOlmpP2veB5TeooBd6JRVgFnC2P3ca8loA==","shasum":"962d6b07a5674cad0177f5d4f1b199d4dfd4d2d7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.887c2848.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QjCRA9TVsSAnZWagAAfAcP+wfb2mQ42rfrd8fRKSNw\nzPcNbaDuGUbV2vMPW547trHOjeNSwjPDi+m/9x8rgKH5cYzcyD5/+VDB9hPU\nyH6qME7VsoNrS3EMr5IA8YfeB8H40EVT0SLUYD5Cac2BTZZ0OoPpPr59c5wz\nM8qvL4c1HuYMPfc/WAmQvUxDR2TW0u5aQ0Ln7hGX2FBgBvE/9FLx/Om/6ie8\nmPEFwNQ+kTjm0/C4RpXfWuq+/YzBCxTndrL0GX9kUuLW/QwIBgYon+xT7Nqi\n4frh67m85ProMSCA1Hv5a2XxLN+jjQHJWl2ItY7HY39DRJgCjSnxC0HYd3a2\nM9hvGEz8nOcGEBKPQdg/zfB8IQaZ603L4RMLGFE9jmdKej+WzBt/BdcNlle/\ntMGg7jq7BV2W7x3NfFPJANc0klQKGzhT4KEd7fOGQEIDUJLSc2YbiGnfhDLN\nY7ifBMZDBYMhmofsyolWYc3B2vX9jNqsFj3boLpLQjWDMcTxCG+Nfhh0Ky/X\ngT1gVVvBCO8hC/qRQdmQnve5Y6eYP9RmQma9cLEvMG7qTpC43v6S+xLRxYWl\noBHk/R9igCdcvCDRIu9d87qsc8hLgmhOrn9krGFCBp/QuXk8jyh33004GX2z\nNUTf6BJx6B6LLz7schUF4nDmi4v5kdnAU6PHBVz4eFuOERcUdKXZPq30cXFC\nqTU4\r\n=a+rX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdaubkuWDVAG1SPw15TxxwIOXbt85dIuVqbLRIn8kvtAIgMOm1s6monriE/Dx/KYqDVeKdFbGclOvmlXjTKd5UX6w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.887c2848.0_1596146722673_0.1475985378260869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.354eb695.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/snackbar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+9j1a4jc8X2TCVvc63gDw+KagyvM9nAD3knCYQSj5hUljSPMM4ehPCKo4iZ6Zl5hEQiIqtc94X6MFiSI+PGQWA==","shasum":"d912afb8e327b31edb5b1b9086864d6adbfcc023","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.354eb695.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI15xCRA9TVsSAnZWagAAZUUP+wdUKA+YduAWndn1SxdN\nj8EsYo5jYvV/Scjm01RUfARbG7TXlMnCQDgOeFQVKDvt6gILCA6t+i5W+0Oz\nNOx4ztGTU0pSBdMMu+kjZ0G2NvjWbDKFKeT+xFZx/Nzdst3CqYgvXNPDQPfU\n3SnSmJ5mCQf6s5lHja4QqkSZ970oRuwdHLPBslW5xzfzFGZPz5NBZKaynTYF\nb6Wu3uskoaJXvE8j4M1zXgg5LVhIFZAX9SRvx+b2qkmhywDQ0hPraCDdRQKC\n91LMxdUZ0P/IYVjGWB/IcyeWRXpR9wzIgHBU47MD2TPOgPL88z9qyLLMD/kw\nFxNDrjz1jFxlHSvLjfYnlP7GKintcgrOLexjb8wLl9BBbrd0uZY64SE51cV0\n41EikmtxUHNGbE3PmLqiA4GUs/0Rzr291autUJuZytl9nV8eyEYO9Nz7lqJ1\nHq928xTvEdOj4JAnXoPI1zvRgBepHWINuqQg5Aycn11EYw8DmxYnj+U6yTI2\nIHVlOfULbS4IVQEk2c2l8/P6pntfhvdR7v96YQFkTIFr+vYvWC0t27k5bvso\nfS6PomF5ZR5F6NbRJU3il58Nik2G+h9vGDIJkk8mPMMm3M24rERskdFvPu6l\nG2pWW98cIGIVzkYig9eC9jop+FtJ8TpO5GaYBc4G5F9qfrv1L4qbGcCaaPoZ\nNiPe\r\n=kuxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuWpWN//R6FWAa9Jynx/UuykpFwBCi2lBse1Fh98LAbAiEAvEGgXLNtbP9SyxPMZb2pg3tlnzZXM8Ct45MXcJcK0PY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.354eb695.0_1596153457434_0.8920093993322846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.7beb236c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/snackbar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eLMdXMxEXwL4EfpADyWg2PzMLM6+M7jlEcQxzafgPf4YbVQBzE2Ec34lbPwsAU34cLNfxFrT6lFpZ6rzCXwteg==","shasum":"de5a24c8751b47b00fab819964eb3ad5af321ac5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.7beb236c.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeDCRA9TVsSAnZWagAAoWkP/00bEgd5BccsqNRb92v8\n3y9dLzAVOrAz768iTeZq+2mG9dm3vK6lATAm5nPXAjY4Arb5nvlCndya4yqy\nLfdmvWKpPYhw8UA6V2SnyZ2ZUyiV5g3i/kntO5ZbVvGX/HZBe/4hv068emGU\n2RDbN9oj8C5pprf51Erqxe381C9Wouwd9tZbgYf8AQy5xjoIjBLqZtfSJrz3\nAgLQQpqyTYcTOffmPhObyKnxt+vLLBH5ElH6rovyaR9nrELAQ6sS4vndSIo6\nKppQpXf05nrfDI5dl2xK8BtS3fUmgNGdwoX6F3V1+/eqGt+cAY+64k6E3ZM3\nAx52hqf6U5MKXEjeEAAINBGQ0m9jB/7OWZJ7s2a4xI+6ZI1HChQweg/0L/Gp\niixIjOUS634jVzMzIPlHHY+b9lvQrYC1qaxXS3NfkAg31+9mOfRgdwY6pcZT\nfH21xRd5CGIuIJ2XSfjJLG18jx/+5CzVj/bc+sU5bgOkuwL3VCxu3MAu9B+u\nYOutSe2bICQiJsW22VkjvOJ4ONPbnj6I/cJfH1a/0cfZxVAJ+SzdpjSLwY7N\nSCfi52Q8BqtK89x+KkS6bzr+jGd62NG44medIdgOdJQ/UZv0wghGZg5Gx+ia\n86pLav/uq5qug6Chwa59iREarTTgt1sxl3iZHMpXdGLXDOxf6zST06JiK87/\nExR1\r\n=+Tsw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvjrsFMtUUHfbmKCTUQa1Xa2xrtkEUtxNLQWBDMO5rGAiBlZJdvEYVaTpadJVSDYLyiFiafel4YZUFzdRstK+phWQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.7beb236c.0_1596217219074_0.3097503862572297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.c44acc0c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/snackbar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0B6JKjbsMs7ILO29i5v1yjjOFNMJdMfi7Ca4169cO9WkMXcWV+AwwC69LUszIjqTcW9k72MTd7gWYApNc3dWkw==","shasum":"da4ffc80ba5df99f2444cf977fa78e3b55513587","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.c44acc0c.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjbCRA9TVsSAnZWagAAPRgQAJnqlFKQN8fdoDf0KjZC\nfd7Yln6Ji8Ah7dshVUppXgl+/hXmqSRuJeQrZmL7dwvN2OnqF5cCwAIqa6hy\nZ/WnDPxmEvzM6kaCs2V/vRGgSzxASWKiUnhFvUIbXs5LAHegQS98BxW+ey8X\nYJ8kt1z7vt+2OP+V6h5B0WQpJgnbDxiOe9wQsdObr5VyGf/Uu8aosF1yJPbZ\ng0Y32QjxiZty0iIW0v5SZOmxSnSWbjXtnYMPmITu8CuIJdi9xVJuXE153z0J\nClAbpljJRUhDamPno0+ocpcYGMkzDL/NLWhokmuPCCeMfLkDOEXR3ts1u6cK\n5dUSw2K6beSWHKcncv5GpfKIROQzmYmimpMhisoMXtkiJJYByqc0Ok1Zt9pN\n7kHyVbgb3C79qPNz8NdQaVhdjPk4SswuTH2ZEMAIemICtdiR47i7ADkMJjv5\nFxCBkkpAVRKj96NsLZnywUoIYOw2z09kajUlKqtfeLHhjx963a5XjZ39QCiN\nHrWy+8YXL5O32f7/typuijpMSm6uFA3CxbUP0FKJ+nV2+SHFqBhjL7jineDn\n68RuD96uL69FcSX5KVJKgwLkUXXyuVi3mvLDnYj5lS3nmQcroe5xT2gEwHDW\nqfnN+S35jB/PcoJ36vK74I697FQqzXttNq4qPSY3I6eKhO5TnylDR0XAMtkG\nnuqT\r\n=/iIY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6InnBm6YRKHE7LkM5qYVgH/nGFljUT5KxvNw4RjcxlQIhAIwd2sKa7gfcCX+4Yy6mxnHst7wOg8ZYpU9uQKKQadUF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.c44acc0c.0_1596229851136_0.21116294687128212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.779853ff.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/snackbar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5Qa8ju5fZO+rHXn+lo8MU08HYhKCHgeW9U8YiWvtrPqj/yr5hiHeM0xCXXj+/MjEZcU0ovejWjfS94VTEmZ4mA==","shasum":"5fca8aa01e5d07d1baa1e92b8322e0fa08d0460c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.779853ff.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEf1CRA9TVsSAnZWagAAuYYP/i8Suw8cKfqEbOw5o3Ul\noNo92irKFjnboesP6q7SMUpivf0kacMiSvEL9jsczfAq9cQiktJmMIOHuuoj\ns7ETiyEM0xDdu/h8pFj22rmcM7y8EW6IQA1ymViRwm8HvN+vBgNOIsvQsjC8\nLCzHFRM7Ed4xKWCO0zj0LmGz7LqSghCIX7fqrV5w4O/jRIGt783gtNB2dzXi\nctKwByRiuWgzP+FRTFTufiNJfPoJEYwgXYNt2b87JVbDkRT6/6c/rODj5wQQ\nR++aWpGLYKL3WmBBzfMYT2t5i6JGcVi3MSFk7+cNVj3hAUG+KdL8rjnATrB/\nTn+u+2/Sst1rrliy1yIaqC2WCiDbltVb87epkDmOmmwjh5x5oe4oVL1uPzqj\nIRzxkdI/cKX6bPGIlzaLQGdcHGBReQTW5gtB1eNVVrh+c+pNnRRYzzK7Gr7n\nqONw5/SIPfeEQsxS/SY3de4OpFRLcMrhtVHy+GSrucgIY9AjH70zEb8jKkgY\n5unk1XzTDWeREpGlcXqnMVLnt5vfuJ9Bx03QWFuYLx8s8OoA89OYKxUrEDnv\nLmyFUv+OfSc8kH9Qcn1AhlLoWmXuvI681yirffTO4fe9NkoGeTK3sYPL4CWN\nY68O1YwWxKJgM446eXw2DYW6SMJibpFCufgwhGcv7bZix9hoBVwvpkuRuGbX\noOXx\r\n=minL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRP2U7Q4nw0UWD7fE/NwGMYAKP32Io+vyh8A+s+5G4DwIgQ8sVaSsjLegYSxQBfh6UME1V1/JYaPWEEzlSF8Pus3A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.779853ff.0_1596475380997_0.4985691020051384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.8aaf270b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/snackbar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rNsu0AJ0x+CweFQIvxz0eTUuSnfhOwdl9WQnbiSZnOjPMcAlBeHomNVdkugG55BDQO1radDR1Dy5vStgnUbJrw==","shasum":"a36bc8947700a528975cd2aec602a83721360884","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.8aaf270b.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFoeCRA9TVsSAnZWagAANOsP/2WO3+Zhl4ZSd3UuuO5Q\nepUOG4f+R/ugXADb45RibogLnkpIZq0ttCuwL0GtHZyTLeGrKSLdHdYx0gNf\nzDBVl8hVyo93o04TrMdg+o2tDRsiDxzSEDBDI7/ETe5nax9JaC8mSh1eOJvH\n9js6p9IukFGtzHwDvJ51gTbh77kx9HJ/SJUa4w7uLYZsFlGP3noOZtB2sDXk\nwGWO7f8v7ksx6UCacY+Z+1NV74X9u4yta2VOnMshboGufUipJZ5CRwPzcRmo\nF50XDEYDelGDRj5Qetvah0WX28yYu60veb2Wu14n2cGa0DfCW3mJDS6XlIK9\nj8/lDutN0Q9cqwo4gslFupVwkEhEtSMXbpVOqqtswLyaux3XAk68/4K+2pod\nLSZDkLLicuIDIiE9CoE70UlgcqwvN7OQDnWXJoE1su60winqkPuj9Fdjgkpa\n3xHgfTM8gAPJUU54n3e5K0dqNCmCe7ZKd9S+3TJtS6xj0yznk0F3J8Fh8EiV\nKsG6jaE3D4EepEI+PK7YAuz3aN+UHNMHmPHqiJ9IvGOwWQWfPEf60m5w6gA9\nFLPQVRYJkdhix97sY695VrHM5w1AmQl4XdNftmAOLmT4UAAAVp+9m5clUBRn\nnO2zkcMzLQpnrLwdCy7t/GkBI4Iz1YPW182Ij//B13ehBAAcLXaHbEgK6186\na7NK\r\n=DX8r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCUAEB7nZNMJguFW2IEfkVbU7IIfJ/igcxVBAdz+P92QIhAPJxMM9PcQlQcTcHBmnLWp98VgsPwWDFuyHaWtduVAI3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.8aaf270b.0_1596480030435_0.03287493979821665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.5cde9f12.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/snackbar":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.5903d39af.0","@material/rtl":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mKeg/NpBEacI6eDStWE/R/5RIUkyzWVASK5oJrLyZSv0pY/PbPdzjF+WfSVQUnahbInbf7hhVknmZwQk8+F4Fw==","shasum":"ec5329974c2ca8589faec1b8e567baa70ea15f22","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.5cde9f12.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7mCRA9TVsSAnZWagAAI5MP/jRZsKxAMHc3smE1SB0I\nzEUqGet2VcgYaO1BmMRdng9Wo/4GQR8QUXxaGV6nVKfxhD8I+TysZfjSEy6A\n3adR1M/xtP87BtsuNeEfpnPz8SCs6EJNemF6aQi+JsOk/rZe57UUZTq2/A/9\nAnuu626L31Fx5pDtx6bkSlfuZP2s44fe630/mWHufE4mkszBGA9cWVPHwFzb\n2D7uFiNGKfyIAlpcG8ykw4Jx2r2HP2KmJ0E0zcMTat3agXKSJ9HoR3GPVpPw\nxrOn+RmzxxzyH9rziAiZZjm4uk6WMHqnUnKES+Tfe4nVT26QozSs5rYafNvZ\njJYeZ6fYdNEot6oT3at0sj8c38J6OVjgX/DZ9VV8q/R8Cgz0yw371LBWNiwZ\n1pV3e0ZOhApYvbPgp1aB/zzcTE/2JUEpbMqcc+iVW84msSMxTTtFbPpxXP4j\nTWRdpcTuZqQ32YEPx1xChWLF/IuWThESFnJ7d019JVx7463ZjQYtfkoupF3c\nlZTmxakv+ZIR9Hid5Siy5dznlaZuutnwwFETyNi08WF5wrzcONG5dSknJd4e\nObZwLwQaXVIkhx5hQo8yfa87wJ2wLRdsQBvmsVkZJo7XR14+U8i8M9jaOs77\nIxN2Yj3x6mq5EVgy0PvyQDzLcDPeY/3RAGbpPtdzFNd8GT8H+fgJNZ9bgVz2\nIV81\r\n=ubRN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDgi4i+Qfzzpi4Pr5p9y74UWCgueKbC+/dBv1fMDRv1AiA3Z2lSvc94tV+FWJbBDH1VshFlvW90chVI4SFDwPNXjg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.5cde9f12.0_1596481254104_0.753069737422654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.1607ec53.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/snackbar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5xAg1XXBInIdyxGq5GNe8qOsUp/xFiPzan0YeYh59GyAAR0C/1zZyv3O22TcZzVTT++0bMkiIXOGpI87NpgD/Q==","shasum":"929d5adf775ba5fb19acb28fe0bdd4f4302e84a6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.1607ec53.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmVCRA9TVsSAnZWagAAfToP/RuHojqyQnCo2M3VVtUg\nvBODL+ejnr8aXXWzDoycj1IvObzvn6TCvyAVbSbt90Od82dyVMGZJhQHIQix\nnkvpLqT0i9vI4gBKSLKxG3DCFu0Kc3HJQKGSDyI2gL1KjPs+2+6bnuWj4a0x\n+cq7Z/+WNIwd0A9u9DeE3oBjBX7gBC5ku55EsDs4nR5/xoXpfWeO4w/BAo41\n9UpIKfLJl8to16dz6XZZci5+zpMZ76k5T/jDbBANJud2I3Nbxfvsa5maCQLb\nKHQNfWwieLnHHuuJ3czL7xg2oJXymIOgSBDDC2LHvqnqIrF3tMnGn8P+woZO\n/1PTLOUJN/gy3kOHj0+daPn6s6ohpYFGXCOC+7MSPi4CgmssuQk1QbVylN1K\njZRpyG6KACBAeV3bUXiCUgaTHVhuuhcGzQmCORDyGm865z0iMMdsP/1vV7Br\nhYP2M+awF3BcfCqfP0Vt78EKqZCHrPXJ+Er4nLxhXmKAwPAF21vwuB2bgi/3\ntx2nlj/c8UvnDfvMBhAkPlXPtyK2cWViQLbB3ViFSiEF5w+1MKllI9uih3zI\nCW5sWrfCsxcnHmm0/P90+gdLU/1xkOS5/10mtsvCFRA8popn4EORxAh8UYVy\nDNDerMjGTwr6vdw+TDsnMkTZbpaXwcePVwy6peVW1FwcQqljXuWp2sSwVGaO\nK43p\r\n=hZeX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChhGaZDn9zQgXqxJ+xqixmzsbhdOxRI2nmlwGwqzXccQIhAOm+5YG1MRcOh0RkYkWslEyyfz+8zdKlekI+J+f+KCj3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.1607ec53.0_1596483988629_0.621436406710175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.678b30e3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/snackbar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-45dlEv+zMuphcLB+IQOZxbybomUcPBiwjZt9CVhHKwZtABPT+kW4OA+Z1CdgqSu7QsySMOVf+sIfLwh2q+3lQQ==","shasum":"4f9544eab24999588e35f3a63a517a09b11891ec","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.678b30e3.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGp7CRA9TVsSAnZWagAAGooQAIvg4xlwsC8NKeqNlCT6\nYlPF8sFQxrQWOGtKA4Cr0+/En7GHnIpQvBoVUJCp1gawxI9YHhplURCU/wp3\nXYUh/Nun4jP52aVkm6qS+GjckC6g8Y+Eyknjvj5GdVwmU73zYJ/npGthR1of\nyDaAwQ79OmSiI58Qj4nmgD09YBTV8V/BLCFF7UeXzcsfs3svNMw0uU7S/YFB\n4gOP3g7Cq8ijnQ/KuqC4mQNlyHb6LMeyX92UQvG9Ka/6jKYg1nCumgJYN3Mr\neev5ekwJp3zB7Ye5pd0amQF25crBxZ3r/3fptubY981VJC9P4CTg/eZkRj45\nrlmRS3wPvS2JZciqzBK+K5Bz+3bLKiRSssMLCqhoghua3+/b2IXWP5ERvRAf\npg99l0YxOxRLtkCwUHPvIeqHSM5C9QXBGuLyXl56z1SJtkHzKac14rVJKMAF\nPiu20Q6KlYBHtLlMmYpq/Bgj5tEgGDVL4d+fwPL+hHwrSYjG6MHuaGmE2biS\nNqDHL4ATbEItlHumjK/29Uiik5lxQhu2di9IaA5yUvjtEncgbIS7OuUTJ/6y\nNLO40hFnptTC1kZ3U+4VvvwK72w20wPg4Ybjm8nnCXBLAy/6BSNBraylNnDI\nT/2OdZYOKxiQT6wrmFBKZoFg7At9HL8cuZbjn/nGPJ52uDfSj4josj5/wfx7\nQq9c\r\n=Mij4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/pEUnWnVgI+BQcmgzUuF+wgrWh1u271yDNSd+Zo1QgQIgfGrLwnVN7PPbZA1/1JaffiZsmHocO9JThQV5iRh+ws8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.678b30e3.0_1596484219145_0.05364320070759221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-snackbar","version":"0.18.0-canary.21c55569.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/snackbar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QLhmmKcBQGRMbekfWKZvS1Kze1Z7rNA3aWlR5a30dWU08u8g0JJBKIFPNL6SzqVLxpi1P36lCfHxRPkXWIRaHQ==","shasum":"b66ef50728e16741e1d7e74c597ede4185911233","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0-canary.21c55569.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvnCRA9TVsSAnZWagAAE7IQAKPvdECdskIGSXBab6u+\nEQGHDFo2tJnO8O785Zhi//nN+Gzu80+gLWS8/nMkPkSidb+xEQjvNjcj8kMx\nXECPAKrZxyIhEXtD0bYLtQeHmNZxQgJMov5Z19xhfg+AAdpbc+06ZmNKTEzs\nUAypPcjmXo/8siONKnsmlMtHF7dCwsFA+NuegqhB77fQ3yWjLoPRi3SmpH+0\naSraD8zyv1RsdsubHzBEcPzrAZ1cZzkz+82qr+a/qS59iebUBIjzQpJyVl7S\n+oICnFbUfhXn5h214Q/1ye4z3gUTO5gMyJOMHZ2ea3a8SJO0Jfh6URHurW3K\nCdt/MCbAV3bOpRhx+blq3ZjTQU6bV8YyXYLGJKkRd46IK3DGBmaoJRYDeHwc\nx6LdjMgsELEdVrSXDFlBNX7BKWa0ZqaXDJ5mmBvokMEyM6Vc0z1h3H8/6vRj\nM3Xr7GuIWHc8MdEjSoMO49zz+Y+Ny3qQobPYhhV3vh241zAX0SJ95AbHkpxd\nKNsAvc+yTR23US9ddVGjuO7du9fB3hfo8JOofEIOTpB50md2E7IJHLOXvPwI\nQxbwOE8UueLUwA15/SoHdYUJYNQ5yuxEHDMCEGi8e2mFN7307hBjrW2vG+rc\n7NdjHj/wcoBezXW2CkGX+SgzDNb/VShZaYR4FrkRsk85HUZ5xRdC2RHfAm4J\nvajv\r\n=5P/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNcnLSC7KB0as+8Ic+3WmzuxFo42oRo/i2wQracZ1JggIhALQN7d4j0N/goxwR8+hhF7JQHoBtElSJ289ivYV5ibPW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0-canary.21c55569.0_1596484582828_0.7959534156982806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.907d4d7d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/snackbar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jO6lfwAoMtRMP9JDS142OiPNX+b1aUdl4y3agKLGWxRt1O2txdunvcyaRfcvuIX9uExVIHSQDnHIp3pcEJ5XpA==","shasum":"21b6c0c44d3680af27f9d07a0fc41d9623b28837","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.907d4d7d.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKH/+CRA9TVsSAnZWagAAguQP/j3EnoyaxP81kULevcdM\ny4rnfgysY8Ow+1QAjvTEXSYzc/aK5F79H/5aWOOLOEC5zGHkdReax1i9rmPP\n4AGTF6iJ1/h4li/oXwhiSuI4MKHdoPOyRlDko/w+Ths3OEzUUhwHW5Wqj1WI\nWgE/jk6u7fTmdJMs69HIcwSGMGOfEIkjip92DCg87Zr8VkvAe7woBclVdJDN\nanCoyVdPJ+8vnKC6U2pADTtpCjTRFp4x/3b17Hc4B+5npivE6J1Vth8TYYwk\n5d+i976RZzGuAsNqZFwgV8+4lQC9F3UAK8piUwGOCE2Y00kLKtdPxL7SDGIa\nfYMI5vAzJp4xxG5gdHViMBelnm8h7E/qjgmnxW4tyUi6nsSupypvFTXBV7Tz\njhGzJr0XpFigh5HQHgqaMs4LJEGT2WecgjlBf2V9S7iybIIOylffAaK6wHik\n8hllYySkRMFAgtNFXtZEIhkWKkbObVsjXdfyuwIVYgXyvKWvAxbQd7uueK02\ntusVY8eGjVOwRYrL4B2lmMWYNoiHaFFySklDeg8UVGZt3YvyQwdtKqX0KyLq\nSG3/fi25DowvB4Ublr/ZT2YZZwnLwj9B7mhj4hC3UDa2W13IcAdU8iv2i1Gp\n2G4gHOGdpaxyZHhhK1qAUbZqqwN91IVQ31ZYBQoU72SSm+YN+sMs6OkRG+Vs\n4GLz\r\n=gpxB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTNV7TWTcJXbJQyzEWpeVL7Jc5l9CuPrldvwXotdb4nAiBkBUmBC1FTrug5Gi+oNa5Agk8Khdq9mVGD6mwbfnzSJQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.907d4d7d.0_1596489726337_0.3324949798468595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-snackbar","version":"0.18.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/snackbar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=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-snackbar@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Gk8QfcnRBNedGAj5ZrG9KOgStdswm/paInEzhPnUV1rQ+BAX+DxgRIWlPZi65Yw6gaHXxqS81maATmyTMysVeg==","shasum":"e4453208268a4ab25e3f0d0e5b8f401f80a5a04c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.18.0.tgz","fileCount":20,"unpackedSize":83078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIB9CRA9TVsSAnZWagAA2BYP+gOktd0NiOnAHWjKQcLN\np6LBCLlcq0emakciByXoploSeGQPZuSrFBYnql+JqwEy3Pi0GbrfdvZY6Yti\neajxZirvwEyo8wtULyCaOjC8c7//Ufa2Tu9HbhZQNrsAKBdz4AuC6K3Amsr7\n325arfUe6TV/ctoq1nqcaxvXNwIrdiPGsTYNzpHCzVdoe0dsyXcWGHiBecJe\ngzXWVMWUAWzQ8rHAT1dulqIUrX1iUD/FDVsI2U5fVxk0cOn5ABmxHwKfAhfN\nui1ZNAXMbS8Rj3AIhA4YMBMPWfs+0ZtDZkCTolNaaJ/xPzt2Dicn+fcZMNi+\n23nLzlY21kZ2el968pNfnJdsA5B3E03rxpjEg0BS3j87c/KnpdPYXn7JfhFA\n2LIVYeXbNMsRtTm4xrYaJKscegzx/HZ6xWzD6uicAoC1ByqjZUaF7jlNgBJS\nhZZpDqG7ME5xuWuSWNE0rM3gniss5Uy7FmL+V3ggMxvehJPxPL68/wea7jp+\nRwxEQCGJlKbvqbPKcAeHhHnCnPhkfSKbGOCeA/M2aGmiTWqkTxQ3cO0MsR54\np+yBxrM2e3PXJhGUFIH+pSue2rpJ8cJpKxo9W6iHDXGa8AUD6MSTIebgld29\nw6DWY9jON5loA0hqU0Q13d7/D9OCJcO4ctrbPJZWkfeFOoyFoppm0xRtkyPm\nQhG+\r\n=mG7Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPTSDRPVQ+eA8vwEeFBQUGID8DJjYdQTh1Btbb2TGszQIhAJ3esHtzdUp2qyHllerH6fJ0fjlCYCmggPmOcNJn5n0I"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.18.0_1596489853288_0.04383544331556544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.f7958e4a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/snackbar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-riY+M6tFgpOJIhGa/mREFKlycC8Z/eFKDMx8DE9DcybZVGbzX+ky5yT9Xt/5F08Xtf5pA/pLiHMByefSAqKsQQ==","shasum":"c14784593a0881306beef86df10d8b929747f2e0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.f7958e4a.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMKuCRA9TVsSAnZWagAANzkP/0ZvsJQQ1kzDiEf9AAS/\nG0tbpTXmQI3EdEvNi4Dn3MzGuXSUBjhF143L0IOnnBowXZUro0EPXFOb5YZt\nEMp3MUn5LgOfcp5A0f6XB2UBbRe5dB/bY2vTr0VHn+ht3kuiR5ZcuzKUjSod\nIVA4XSzepnjpTUYTLDF1MO4+ppZ+OZaozGXHExdLH02gpJceWsnzis8UDVhL\nOfRq/Fttq+s9k+HnEAplg31AXviam8UCfM259HfEI09HphpWkaID3/BMIwNf\nRgkxV1zPy6SeIOaXSjjcH673WAMUsIfZ0/nYo29wsOpsynZOe0tBByXaaTQ2\nlARe6C8KAMrnn88kYK6qaSM5CyyBP5VyStWLTd5XCSFWGxV4biO7CMKNc8IX\n7Bn6cxZys6r2f+stxnYkMXxBi3i85pwmB8WpXME8fbSEa7MUn+mte32JxvRC\n4E+D2IaLsNCuSM7ijGVtXFE8OcAJe8albtehSg+7bvHft3yL9T+PTQhP15nw\nyqllue0kHvusYn79iZor7YLGgc9hEvb+8gC4yfwApRbkIm1PwNGLU1uik3wY\n2tFry1bSk0ocMQi2GiaI0vK8ttitOHo1XIz+zmKolnE1tkDLj9negfVbEE/b\n/aab7sOPGnTUM3RFo/45goq4XOeQEMglhhQIG4wiER1DxfJZ7eOghqoFfC+B\nta8X\r\n=RsSt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoZo8CvyVTPa1o50uXpjaMvdSXRVHjLT9Dd6JpMLIeEAiEAiML3lkoUttklHtIkMB4t7Olf2WGNNOYdrp5yQCBzEYM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.f7958e4a.0_1596506798006_0.03248755761800726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VZwZ1INhXq0jSASEIUrf0cl0d/zpN8EzCjWb2iYhcbaCQ3PK7AGpRCWDsF4sApxJyG2HiFdFFVpa2S6fTbBJZQ==","shasum":"dca6b3a682c19246bf1f76ba22da6f18c73de222","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.f8ceaf79.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRdCRA9TVsSAnZWagAAr/YP/RlE1xDfa5QeKoHrEdFc\nPDdPqcSL1isZGKiM/enJVmmXAojqw+3mhD6e+vuUnlWWlDJJVNjdVpYEI6Fr\n0QZ8DtNG4nSjUcEO8H1sM3dZ/ebtf7Sn21oIcdEn1GN96H59mzCBk4xa5Dkw\n6A81hgd2hLM6SeO/ZxINBMJRvAHO8gq2Z9OE/4OROatP/yxfw0XIb8JmiBZC\n6qxQQ7q8PB/Ckts/ADEKD3Q7R2ULyL0g1EIYZPfxcZoBxne/X7ZEX4KVkqon\nKyXxtsqx1AQRzKb6cihyFloghKApOHADJUi1FUrb/vy+28rdkwnxRzLpHJvL\nwP98jLXMqVnqYLLpz5oli3KxMMUC3oGMlDFNC7XGBQFMJW55wB0s8v+hQfj6\ng6muIr13dmz9ix1bCmEWi/v+0kNFFC1TT6hklAZ9dm53F5c+kwKnIfyvDD//\nIDInNxN/dWHsGqPbgtq1+ImG3UZIC05gdLCG4g7KVYdYalVYMlfezJh1a/wN\nZBQmJ9PiMdnnCrzxg0TPv7woh1o16rJWdQquOThBvRTbtLQO8dYDwTQ2xx3n\nmVN0crkRU6rfxkPPCOHkqo9V/wPgvD4zpEN2EMl7EXn2dcLHtZFHNmcosSC2\nds5pQnluutxiBrf0+SdfKtEjjKuXCW4uajQE7HIW4SlCmbwO8ILW0YxsZw8Z\nA9b+\r\n=O0QI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJq3TuY/JO7K27fn/7Qoy3GMwxFlvWTuRT+3tcQ+Z05wIhAPxE6Yj9P4n7/5IfIVWiNyfeaQttPA+JxRpvBbYg8Obo"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.f8ceaf79.0_1596568668520_0.40415311711202095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.6b9e385a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6FQ4SpDr62nCD2xuE1+fm6V0Db6WVAMVTolHF6c0enIOX9Ym8EDPzaoyU3Rv7c5ZUetuSCY9FpHE8pThYKWT4w==","shasum":"78ac4725b049a95671be32fff3800fc6b864a702","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.6b9e385a.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdM7CRA9TVsSAnZWagAA9XAQAIQ1kRKFz2k4mPYDAof2\nPbEAoBYi+IWlMOMtAvC0qvYn1LuDe/Qo+H3HuhCRLc2CyBgOLUpMVJFHvqpZ\nVa7ar4endLmlF/OjpRN6uWStpw5a2JoasaNTv18Jw9CzgTBvQuZliiuxFdLo\nD7sfR8gd4AGyiKoM/SEnM1eJUGdvXao9XIkw3fUGJ7wEVWwm7EKpmNzhiqt9\nKzI/pgn9hgOsy5EZ6ugGrRIRL9goGewTauvB8pokPJ1Qug0Cy4Y0BLCmzgoQ\nFoJweEvESRw8sbJPS37m20P8DWUGKWJgf3okR2sJd9F215NnZ/GX0/oUkFvh\ndw8vAI7f2UfpPpfm8NtDyBU4SVlgEWXI5DU4F8OjDG3TSmLeMfiEU2qrAJvS\nc0s8wORsUYBLbn71UfvWBUDnAcwHxAohijfKtFzWsTPK38LCyGRMUh7OEqph\ni5B1hpbA3xGBVu+fMRWer0KIZNo/ZZZUCzXXZvXvdu0DGb6yMFT/VFb/u3Fq\nfjS2z0AF3xcGnabSMd1ScVmw1M0P4vVLilsW35e+JQrlM0XpDh7MfshRertv\nFVxCRhE0GJKDH9QdgTw5lsOIZufEPkrX1tcZtrqTmKi9SLUff83JhqJrwN+x\nqo5nkoGvZnXiTpAudLQFy2iuo68li6gnb9wVdmlpxntjmTHYTUTjhgiUMgG2\nA/LG\r\n=0PVh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIhU8Erhgljc/ht1tWsQEoH+fm3Mhtuw42Zj5V1p4c4AiEAg7Qbp+vpx1+wLXxHVgWe/q6q1IL8+67LC8BbZ46dXak="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.6b9e385a.0_1596576571305_0.4892785091810272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7jd40S6RlruScyuwdtgvN85iVeLeMPLgZEPKPV3Vcx6XTTTcApo4isMFu/BWIz1ZqJ5zaJjXEJ0dn9MTJx+Dog==","shasum":"89ca9877cfa5b561ef6f94ad66ad6b8c104d067f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKitnCRA9TVsSAnZWagAA4PwP/1mLC5sfNtWot6VMFow8\nc8OxlIl3d+rg9j9WEiAIdatXQeEZR33MuY+tn8VQeJ645WmiJbKShfnk5acD\n/IRK0gheG6G0920Gj9ml7bwBHp+kkad9rNeOlET4yfu29rOxowuspygZgZDO\n59OVmQuSrSILbkXf49yP5hRs1FxMtvJv0N2Jbxwj9OcaZuCjLuJIC8Y7FMYO\nz1MTREK7ARkAED4PCxOXJdWz91blFh4GrC7aGiz44rWWb5GStME6aXEb25xO\nS80ab7OLcQq0peuu4jwIg+4mMZXW1RUeXdTpch4ymIlUWqiHWLl3bLTMo70T\ni0bYjWUV6HmfdlsWlYHax3FBfSDodwIZ/IkwTLasuY6U2gH2gciaEP/zK9yo\nazK49tak5qop32+Whkf/6YK7BMPaiyGy58nmz4o6RnVCvqtS4qu/AtnhyR4l\nriEUDV2QivpE9GhbiKX1QWqvXXIYeKKEympoZm/bWCbLE1gPguhcSjbZsG2c\nZkYF9DoO6kGBZTVjA7yNq6Bh61cU7jytvGIAF3+/FWwwhgGduqUjp89VmrDy\n/Rw1WwpURmUGOowuuLNVNNrutC+2YENHBFgjcDdnR0w15XHXh1loj1DkOR7b\nkKJ1cL1X+vGKk/41B2NXALf1jp0+iGzjgAqPhvtQq1Pg6tfECIZyQiiUFlXl\nmjEa\r\n=3T+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4R1QBkAZodUELa3Me9lywlE/Sym1z8Gu9Ybv2i9sEtAIhAJu1EYYxOyJuhEIN55vhuEplYrKZLvY7ScXWxBKSRgLa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.9a7e6d2a.0_1596599142997_0.34587116945493435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.188f3f1c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-obppNUw9NxnUqX5veZTZZu5CBNWxYqwArK2tbBY7VWyoPpyOTMKpTpEpaGOfC+Sa6s0z8S+b3iOj2T9F8OgQGg==","shasum":"8efa22f1bd7a5ededbeec6df7aac31315fd436f6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.188f3f1c.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKva2CRA9TVsSAnZWagAAa3AP/RLH6LIkyATicdm2FuXI\nXLwjBjYzRkOP4oNxYSPJpRxNyKZu0FeNPqbBeQpVK/FhV9LsLjHKcOShP2Iy\nq751Vlyv9FkoY688BkRHdltnR5Jn3tHewqk4oRRxrN0xLa+Ar591KzykKOYl\nSawMYduFTDWKJvbko1vJFyrw70kjWXBd/IO3lBBnE0lYF8rLBJ+hOppYr0lk\ntSt+7THW+fhbkBf6e81u8XDZtKZV0cg2o78TckSFjQQOPa7A9kYZMr62H2LP\n5l3Xp550luta33PlZbUT7+yAShE9R3VI5ei78or1GBjdGT8qfH165v8Fr5KC\nzOMcMGHe9lDOZJxBOIyLMzCuG4DBt8mUi+ykvXQQrLxoczGmlWAPEUv8bJQw\n4tCcjVIqDQ+UfqiDmMYsP3gWmp0KF8Vi66e+51g0FYmIynMTFzR2HqsyYJBE\ni+8zHpEwZ2COpccuNCvxDJjL45dfJnuIMDgnVf+xpmIMqQGQWNmXOvF4qCK0\n2avTHaF9Ll0C/WSwhF7kTLxCdCuCBDTTto771BlIwMe27to6I180uPvmKd1a\n/80mDKpyMhnx6V8fI/tsjTKhsdjDeDYACe1u+3uHBKiqG/o7DV5b2NFSWpTU\nniOA2+4uZfb3TLuQey3gbCHf+2S7df1WMDA+aqQWLau1kV19A3yzbvUreH/5\nbDgx\r\n=TgIC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcWYPCI1kdn13+joxYy1BCU3Z8qadSdyVtZuGZuxBLmAIgGo/c5leRYo8rvl4pNNggorieeyDVwNMObrAJyjm0n/E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.188f3f1c.0_1596651189605_0.19771570256067483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.b6106add.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8HYtOpb9y7rh7dXDXik9gyNuClIHo5YX3WuEXARTjmB5SD4Bhk5xg3rMlX4YcfC8T14U2tmhmxGBTuK9w0YOeA==","shasum":"f052974d9f7a233949bf6cb327b5062afbd8aaef","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.b6106add.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtECRA9TVsSAnZWagAAVY4P/1jv5RtDEwemJvjyrIp0\ns1s1upGrla58shIjU0P7qUPQawkgGr7cRjT+Tk5K+V1SchQYaA0I/1Jxi5YW\n3WAszBCrUWX7lsi5BoFOahv0ggUUhG7W95OP1sBkPqQgUAiuJmiEhpWePrzi\nRY/msIKJ4dQ1717SNjWH/1tCyCmrH3FtkdwLoKZOCTdON+G1tJo/Wf6uzub2\nzetvT96i4+AVBoBVQJ65hcmI26KKE5TlF3v1I8zUbwXrrKZaK00cIrv1p27u\nKAFf6XTkpXaIQhCk6V4p9qLFo/hxk78pQ40eA6N91OQOoV2cOTjoY8XtHDJh\nSRcXvkfSW6BTMxffB7wYX9VCxwNoa+JiPUNe9rXCV0u/UozH1RXuMUOY3Ptg\nFr5y3ebFiNaNTah4D6c4YFkp/2qsIML7C5t+9VQqAJ1nvQ/B73Dn/B941vks\ndD2Ygewrbjdnx6EMVzYdar0ETdn79dhYxIkJgsBDQRSPGFokYCVteG2FW2RL\nZhsqQn7fnscfoi9HFTLCELWpoPJwRPeU5RAIgNebNWfEQD0+anjeoCwtvzHB\nnM7eDDO5D+fIHB56VgTNXWjpl/f3iI4jlt6Rmu4ny3Xxje5/9JJihuSj9I0G\nS/bd/ckL7Qxjf4jDCrsNEAy8RkISDxweA0vr4VyrXi8YICntMupYw2eTn8co\nU9w/\r\n=er80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqm6rJBorgB3W33T6UVGGgcKfceljU9BU20JHOGm3yeAiBpmh2e/n+KO11LmN37PEVAxWK8wK8tU8t0vuZzspGFIg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.b6106add.0_1596660548184_0.8766319005628518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.ebb4c667.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GOgo4SG+/f+yDdycU4CVDTUyx+hTkMbz2lbg3Bttddy/EnDKC2YDFUH3CZxFEgHKDcryCO6bCOQaNTnnEuYVgQ==","shasum":"9215881e3c6bb3d129b9e57e8478d78ebd241d0e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.ebb4c667.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xaCRA9TVsSAnZWagAA7AoQAKAKc+ES59F47mBMzcnv\nUkCHb+yh+6xW1iF4inNthGCzEv30zeXwO6Beq1Yt9e0L59zvhDoRPiUhBJHW\n/1prXQZa5obUIc4cpAM8a8GZsFNclhQdXlmC7ILLQrZ66cJZw0do0jPXiWzQ\nIVUXJbUiPgVxz88aqdzkYgEy3UgC2+LXEaLYOW4N4tbmhdMisSusafVdnB8E\nQxySGArHS78nloTg7HmegLSNmG1vpQQbwf5wuHUjaYmLVEEpv+WYfxndCTF8\njJ/l+i48atJAAewSpH45ffSAS36TzyALJmpZOyoYkC/6lKuegdc0Lcc7w8r9\ny5WAu9YxFct5+ZNwAr7AaiqnhUpgaQ4MWBLm+PeejGLNqHAZubxXGqRzfD6+\nYTiTnQsUjNaHFy0wsIpS9nDuLolC3EZw7VT5UcLCWIlhwQkovdL99QiKTfV6\nJ6Ia1ysbpUlMt1+HonmYWExCghMNxbFh711NA2IWr8Gd3IhE4XZEpN/KqWcO\nH7Dasz2675174HQBtVeh6goFna95O/cypurMHwuDuqjHSPH2ynXUMx+Xvefg\nROEaPt2UBYCurwPCSoQxW+7vGYEo1gEOIx6N/aQFG2T1rbt+Q8nxGYA4LfdX\nhPWXgel38G9VyAITU8PKwjnkr5v3awgk0x3+NkcPe4Ukp3AFWQVY53oGryCm\nDBdz\r\n=SeM8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZIHj/G6ubsDXnRzGqrfE1I+HDaqdvBJRY4lF/dJQT1AIgYKsC+hicmBRHXW4aShk4a88nlBq8B2gseptGoN9QlaU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.ebb4c667.0_1596673113905_0.7806103762342169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.aa44289e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/snackbar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4jDtXcFdmDmmwkWGcnpMdNeTrRSyykXvnp53n3MTC3eIHJvaRp64/CJ1oYDl4dPb+UvckAsvuduIq9cQYKKfvw==","shasum":"92ea946822da072ecc948fc65f63618786989e17","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.aa44289e.0.tgz","fileCount":20,"unpackedSize":83113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEt9CRA9TVsSAnZWagAAfDwP/iiMUIZi3vHmpozZ6iY9\n7DYvWYSBg2NpcW2b5GL72TtqctKjHluAhELG94/8m6aw2mTwhIBDq/CtzLK/\ndSHtWvNkhcfV6yejdBqZoDJqVbhBlVJHp6ieGKHR2Rvkr0yYo1kWPcamctV6\n6A9Xj8W3UCGyk5fqGCIRyfCKNKTdTeyl2tV0XSrjv98E6dI/BcdmJx1VleW9\ng+5T6NUVELldHVJON5kS85U4upf/TDRk5fCEZrTNjjLqNBqnvbuDZlY1jTTR\nD2gpEMxB+YLMjvrp9DbIuLicbJ4wxrVvmfL1ekUIxorbXzmmphpkV/ZIisOj\nzEsR+q+flQpH0kPtZ+v37punnRACG1P5hA82tzVoHRjAAjsknQbVFCc/Ejtg\ntVnoRSGtsZXdNIg83hdTQtRie882gt1ggnCQgZhcbAogdw3ppjvYuwd5PFsV\nWmD+QYSP+Wu3mBF2Xw83qlhbg0ud5kgw1sYGZAz33pK4kxMlRNutZrm+FjWs\nCWEuqoQQ82plCy0KP5BsYRZm0FvsNExA5hrUAN4BzIJP+FNocdMl90zn+OTX\nyVb+ks7xsNkTfq9UFzgLKXXrOqMp/nUgVnXKLiM6L6CBVWXZaRoI7GZfNbZ/\nat3xU0OAV4GjS5ZN38LjYsbnHWO3Yv0emLTPMTWja1bmcttG+DOMFNnHdwOi\nrMFN\r\n=OGRo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwYuKqthWeMdazGyMCsfwEbI4N4C3gxQ1He3VsLN26xAiBdJs/1bTj02Dvkdsuz4Af8OZR2jj/c/ZRxRs8Q4m+LBA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.aa44289e.0_1596738428617_0.7410318407737897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.e6b0816b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/snackbar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-aFcuF48rU/mlOwCnndwo0/FJHNBe4iXu/1RfqAWUJu2JdsaL3WCqu/GgEmKCNKRoiJOTt36eUFO2ylB4uzDs5g==","shasum":"3246ff1d9c7cf71f500168fc0f7153343c3d140e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.e6b0816b.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDRCRA9TVsSAnZWagAAxuEP/jJdtzVTRevWDNTClFli\npqzf0ZbHzmLbUDmng/R8W5345C6ywZlUw96fU1PC0X23ghXWMuK8sxCBY53P\nuiXlepGVeOlH0VNlu0m21poPNib3h0NL04Uvlvnunn2rQj7KGRhdV17MP1P7\n2ex21Dm37taeYTXAPGrD83J/AY0++r1a1yKF8EDgodSDxNhoUMGmZjDG7b3Z\n71Lr2+ANqK2sil7L5lAW5578vbRsLKCj2ZxhEYPK3yFqN7FsfLENB12ShbOD\nUU5iu4xyB0ic7tBqwRrJPPsdVjp1VVb9oEzSyyYvJyciTUrldGxsuXlFN4BO\nI9QRL3ioA505QqFZKMxNaGwpanr3D24p+osnuQeHX8+xnsq5vhl5DjAi+yK1\nwPXJoBRAKlQQ9xbu+ZNZX2wgQ0Re/wj8rK6kR73wC00Ai2RuAmMF8MAEDHOg\nHK7ddsnoooBEoQwMkjz+p2Wp9mGi9xR00SMwK2lze1+tV2K5unpEjRBAT+dG\n6mT5diz7aQCtHnoc+jmqNC4NzIdcso3GHCC4NH9lQdXY/+aq9xlvWF+0KbMg\n+bsBFzhlhwJ5OFlBN2d+pv+2nO4GdLj099ig/vni3tXAT73tqan8ILJWD6Il\nfPwSUbNuwnk0yqyw+Vn+xNAq1uNUSgTOoDhyCA/Ij7vNz8V0j9KHLFQ4F7iK\nXZxx\r\n=B52b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5fnoKPyHCQlbLn72pu35OnJlHyojFa1F+4KlhH4M5zAiEAvUdQJQDC9ArfJZemVojX95zBYvXYLEKajbguyL106e8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.e6b0816b.0_1596825809364_0.8151785471031523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.96d15938.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/snackbar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3QN48EzT0Sl+Gi46mmA5hjB7xSQGU+AnjRt3cGHy1GOFokiirWOvau0OfE9rWvA34wrn9V7em6krbU/fEasxeQ==","shasum":"39f508300471eca5daa1f73912f433edcd874a4e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.96d15938.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbl3CRA9TVsSAnZWagAAjhAP/Rx9JjU/FqgQlbf7w5Fc\nwM3iYrxtswDb3q4NG1ICkMmrZ1X/cZvNfVFO4jCypJh4RU1US2NALzeYiAew\n3FpWYflaQqSsvFhqZ03AZcjWSoQ1rkabq6x5e9FmdqdAsrK45LfbpIzI6tEs\nggDHJMy6//7hYJw00+ALqaPnlmKpWBtHmkQm/7PXHfR5Ez/AK9CdNG9A4Asp\nBMSV4q9EXC/sR0wUX3zTmIvpgnRzqDvncUWLLWeuLTNRRiXTN5rIEj53KgzH\nyIOwdV7YI73HpAuvvIZVVQjsl3FidGfhQ28upKvsfaqw48j6DXmun0beEjcH\n6HsJP51IWKxEhG65JRj3ncStW6dwMV/k/YGLq5ARfxrbl0O63TorolacZQgz\nOAc1Xw10+SjTopRcEISZ/Pb+xCtL6t/Jy8e0xDKfe9zAdPiGDSZsW5Fj+TbU\nkpb6/EFN+MqqVs2e5cMWzs3SQQe//tSwe2/U1bS8DD0ejSRaS/KurfnrGhu+\n0/4K1GMNlifq3nwRQzGpKYy8DHdBfLweyuXRA3cDVn+wv7FLZAGtUIbfKoGH\nXwIXqwga807v0g756aNd/aJzB+jS0X0u1ICXicYanpf3Sibd6CEeS9kpjLur\nIVJg3i/YoISZtd9I+S4UzFgSjd1ui24UC0/RSXhh5KRcoBtdOapQjhLarOQh\nAiwy\r\n=nXXt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQBeeVw7PVhezbERKKbJzYcUV+93cA5WkmunN5YE9iXAIgP3oppk+R1AurRkBZgOcocuhkDjuDgcXAIMNzLqxmMlo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.96d15938.0_1596832119086_0.8463190366412849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9d991c8c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/snackbar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-b8ppQXrz9JRjqnH7ZnY8qv/Q7o0S7PSi9goA2IdKrCM7MidMxjWFAnu2KBxTwxwliMP79mpAZt5/rG1XiOX7Zg==","shasum":"c8f88df39d2443dfe93780d012ceadf702fddbba","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9d991c8c.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDOCRA9TVsSAnZWagAA1ZYQAJdhZJWXSo0i7NX0881s\nxxKue7LEVZtVVbpLeA2c75gXSCTx2c3D2pc0unaQitSNSsrHWNHTpLh1pOpO\nJuL6jaEtgtADwJe5EBoITPD2Ouewsy0xymoyOORQDLamLmbq9o2shuyNcA72\n2VCXsVvDauui2EvdzL7Rxtqj6jpOaQaXrDhw0oHbLg7OqWnRl5hYWPeWHF5l\nKx2RHGJZOBMj+zHzMYSfTDbjuAVfa6gk1+hq00MlvA8QFZ3irx2KQvpQzeHy\n/5QxVpq389JITZtN1o2Si6cBKczYW4RTAwOAUnd4q4XbUzH48SvoCMblngui\nR3TVcBo0bT5uVIDpR2To5mUHplWcfPQHYnrgzqf1lyTvZlgAtes38+7Z2R/s\nH7pvxFfdA0KgkB0hP7eRw4rIiSgxnaP/CMs5LdG61QioGEJVCfeGCl93IVun\ny+s6NUWgox9hVhHKikdwnkZwhvOti3opKICsyrXPHOj+R0s3EMq65o4Xs0tr\nVFS5MAU5YW+oyLNk0z+70GAKtv/W/RvA1Ry/l5m/PETgcLCCgXte7iwxOn50\ndiV2C73VN3dsH7bMpFDfsss1Os2rAcRl1yMdxeYxQU5AJGfPMg/7jhavr1YI\neFCuCqphHO1j9eInQe8xiUmBm3dzqGHjgxF4bkOg2wwnGKwcYI4+0otceqL9\nuJR/\r\n=AgY3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGR545+UWqJzj4vx3aDOvjc/fvAjZuqJRCTb6164/KBTAiEAsT+drOBC9tXWtE4xranZMne1EQx/kN94GFcpxS26V9s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.9d991c8c.0_1596838093942_0.5264549785127193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.13bfbd72.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/snackbar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0D6zrAi5C71/jesMI+Fq9sG/ShBCNnjmw1Pnwui923vJxTmkPVFFxSQPaoxdVFEbCi+gZso6QE2dK9eMsnyyQw==","shasum":"08311f17fefceb3b7027c13790bfdbb855a4d7c1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.13bfbd72.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+PCRA9TVsSAnZWagAAG3MQAJS+70d5Vfiq2Tvvj71m\njR3sV55EUjDl6y6kiWVKYMhpLLXrdZxkN/jqG8JxIt5AdDLOWRFA0vBOXBDz\nN8Ye5qgovqF62CCdgzEWD6+cUqa9zLP72CE/LgHwvVtWD0NCYdJplZjmIG6b\nMRyDAOattgB9+MnYYE2RfoIZ+sxEZBdYj6urWBFeNsu6GjbbAULkvpSnU6HQ\ndeLlnwgJpLhzM/acUy0OKBxrCK2CVFvttqkuZsnjXB4oPVH5zG5gagIHg81G\ngbFh0VEsxkF0LmrFEUVz1H690N8c7YqTAL7aJaLpQ+OBQRoXWtL9zUr1DKjt\npwGsxGD8k58mkFHcxQU+dr+WWGQq66cg+tE2SvrhzrTzguMYSvYwTaNmoQ4n\nY9a4P+OYF/shXcKU9pLJ6Mgd68edYHBhUtZiGNvrxbr3ufbs8WWy5yqud4Jq\niP7kkOO+Zry49Wj0JziPaBeVAn+y1WlezyzdAqTwHaL/sn9aaC0+ropYtSdI\nljHEsiuBBOBTek7ThyyowVf9LJdXUuAEhmxitREUi57t2L+jbINOgNsKu3qT\npMHqEU/3/64s/U7lWpJ6cIg3sbCsk2L+GyjxE3SVHrBgVRQGLfLNoKl347bv\nuvz5yfkVfua/DR8o2f+aUWfOziHtol5kBsV1aa29H2Y6xNbevPQJ3RsB6pce\nlEg0\r\n=SaeT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlVG1jts0t4vje6DebFe0PO/WrmTrAa+J2mnhfGfhpSAiEAvE4kIpAhZwOWuA0szXw78QqC6AasCcvh4UE1fZA2/Gg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.13bfbd72.0_1597087630741_0.6255870210906087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.30b1b258.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/snackbar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UGW3eERAKUi6H5s0eYlJyEVOXFVXZfEV4hF3GvL1sef6i/ejJcmtWlZcNNWCcFOJnuocCii3Sf8vH84i4iS1jA==","shasum":"4767ccf3a05e449e84879d8ac7981aacfe24077d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.30b1b258.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajRCRA9TVsSAnZWagAAZvwP/jYc/DuLRySZB50/Wqfb\nLax4btkU1KFvxoXZASHcmMLpv2C9Hj3mOX0E54HtWxicXanVfJzMs1uCVYOc\nAQnc4dVQ1J6vyiVw9U7D71HKyWNJFCKTfGg0fBzUiuF0GPfAdoGl+B1253dY\nWPFALfsEW8pN3fWPrJR7ba1spWNVOmBLt3RiJdFy4XkX/SASBwhBBlShi+wy\nAvMlFN/XtN6VzzFEL9ICUAJz/bq+O1RLSUVkddyvFe2qyhKYPEpQrV6SirzJ\nbD9zgKBzp+8RVh3jIeSHFs5PTRdSQp+AAP6vFuaswmMJak6wEns0ttjMVraH\ndW5nu9ZL+ScT/EyEPSQ5eMq6U+ll/o7Jtnf4sLfr5fQ+Gw1O8RNU08e2yjkE\nY6N2a8MDyUGdvs6WorbiCQuPbSQ/IKBjlhLWDsx1ncDnOtS0Y4Rmiepz0xgW\nzMHkaHJ0d1LeDUWRcG2cTJ6LS2a9FByhXSi8akyqQgHJj2SsvxWonBFsnhEh\n/j4QNScOrJiLFQMG5/SdUKFNFo0NBoWcINBzc6c99B7/PCiUBKD6zLb852ux\noE2R7qN4l7NrTtkbjcDG8btXfSP4u4EHXsMr9ZvLWjKtA5ejaOC56sQC0fwF\n4bSDjnq68ZpVBzAxlI1KzTdwskE7zzclFWw+sZC45jIAfJpzJhnPbwCbjy3a\nTWbH\r\n=Jn6l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgoxcBxTr7C+EnBAGb49hlMilyp3NdqSznSun0XK4SNAiBHTDFbTtVg/CFcyN7NuU05/7He4gzK/bg/FW6Dy/RHMw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.30b1b258.0_1597090001454_0.589632979581725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.1583e263.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/snackbar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xMy4y/juU6PcR/DDNAywW9greRKLSDjgOi4A8hanY60t3mxFixx7AigLM2ON109WC0OH2s8Ngr5n2702B0Wj1g==","shasum":"926f7835cfe83ae278f61cbed78022498e7f6a83","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.1583e263.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVlCRA9TVsSAnZWagAAm64QAJSsbbuNZPuS3xhs+JG2\n5GCaBJkWKJ8ALVD72p/mdnsxXVBPLLM2Y7o5FYGwj8UELP0K6LT2Iq+ZdEWP\n8dhmmn2SMTDU2J/aKQhIkQhdBdtikTDH8+VSxCNmHHRKcI3IHyAtW1doEzcZ\nMVw+O10R3+v2KsN9IOBVUMaOA/DxdlVaLAO10jRX2DMBoDKYZGlQXOBGELnF\n78XlXOuDXl43MGSQsZBLCgvUyO1x5T7AGL1Zd03y9V9lCqqEay8k4ncVshmk\nOdQ5cD2aqCMXUgR6sDG7eUCp4BrkeoArv8nNwIHAeEsVoU1li8mu8r4iEIBg\ni8GHESJkdNa98C1ig+e5/HXN2UsHuMshMuOTwKMCoRdgTgP5xKLOpvKHUXFa\nAYlJArDiHADaVtCaXWxoyY5gGoQa2oAtAtkJpiH/2fpbrk2yjSt6oTbXs6sE\nOZwRN+P4etLQvYf/mc3z4Ojqj8a4slT4zqSK8RIidVTf0C3/PQmsf5Je9U36\n86eI8GLO7SQGIfNsXBAuyGhoyWJ6iFii9rCLcTukLUwGPphRrjUJiWroLVkk\nqH7XLATyYJir/W6JuAaUmvvCLa7BmwZagWsePF3QKBbuk4H1k6HYyuemNK2e\nl6++Hq2v5RoRPNf8VlGVXuYFsAG4pLZkt9JSJ31ZGyj3/VGSd0mJihsyGxso\nQzsh\r\n=/6VD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUnGdr88gpSx2ZQ23sCsj1vsJfZYIFLhkCzyMhCQc+EgIhAIF41EUqOg3mzVVpSEEDJdz2zf0+CJ3lekNBoBBF9lfa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.1583e263.0_1597187428783_0.4558853301857173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.fefb1a93.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/snackbar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zage/QkRuqefYSWap+ZHeTEzBMVpQgp/Ft9PpA0qnOEb5KKSrm1K/Gh3Uaqer/qvLCADN7ibjmvFThB8cuP8bg==","shasum":"1e7f5bf9bba5879f248fec28a006abad43f50f89","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.fefb1a93.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbXCRA9TVsSAnZWagAAzygP/08sp6pntNsjiG90G7TQ\nU1yte5Ssv+InPew6eLgzyBrxD5XpdA8Dh93xhBgWnU8+Y1hoaoNfHU+HBEWh\ndfUpme24Mgw0CiojDxuGxLt8j75ALEhvhoIJyiazdH9rd3Lr6TV67N2E1+3D\nih7GhuieOKJE+IDbMRIwLa5e/bfKIp3zRdsg68eHydkLhJens1+ASjnVwQ3R\nWNH6wkyW2/oFVFwiGzpOZd5vmKkA4vK/g4zEaeSY1ocBg5f8qf80U/fjMvxc\nfqnXHeRbTyDohHzFgeClQdvnTNaXSw7po+2sbxVG2XWR4laYiCVB7EkFFcoP\n1ZWxFTL2jQuKXab6tS8jfZTRJjCCjMOd0v8VaUrYna+Vw75aCQzKP21bHWRs\nLGgkOLfHQPEfcUmj3j1M+FPX6uizd2pl13Pb7PtHoaIaYnYhYhBZg/sl4G2i\nilCeP2WE471oGMWHuIcZLHXSN0Wyk0YWtUZB6BdUD3aM1KBActoYkZ4P9BAr\nHth7PKTez20LsKtrwdFORuhHNiPh7PPS8+2+0tpoUkyBu6mj2BWlai5idixe\nJgvlm9WxCrPwKkKyiJFpNk+lZLKOo30hk82fKOGlTaPHubolTctbDZvzmQYW\nJkEHQ+fBIoXjAeCtXizHPDAkvWRJoA+RP1wUF/Mt4QRnoRZZdgjj/18Szxcj\n/7S0\r\n=sHP5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmKXYy0qCtf4OUOJix2on9aE4ZZtO7hyhqAnwmGvfBCAiAdT+uGwzo0xo0iDyzwbZdXJqez9MqwonfrOqnxGjJCZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.fefb1a93.0_1597191895436_0.7005794087941726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/snackbar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-09l1UJT+Y50GwtyhrUvwaRCSKSFPyZhBx+B8GYeHEu2UVgvf++0oq9HqbHA4BhyEu7LYBwEsyo0KYI1oRB+Bxg==","shasum":"ff1dbb9be331387f19ff02c7259b50e2043c3c58","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSACRA9TVsSAnZWagAAyIgP/RG+z3N0sIGeafj2IJRf\nSzKQuHEYDQL0eHR/h4YzCCR22h9REhg7zCXdePnpgAjpKYMF0H9x0aXY4LKX\nc/2qzFCBOBA/JM+A5+aX6aRH5lbOx+c2sbhaZJ8hEwVrOdpqXqL2/e13DjeZ\nho5fBpLarPz7g6FgeNPnbXX+TpI4WgMkfNSASmnzuBV9xubFv/sn5UKTCprb\nWycSCiqCdgEfsDJeoJmhrAOYyg+/QbpI8I7Yj9CQrn7SJg4NkbiIz5Xtf3m7\nLQEB8cs8niJgWj6A+z42eeDYZIrWFT8FqD9dcWEgYHbS7yyLP899/uVTa9+T\nugUtGNBpD1k50KUCLJb2Mzg/ZwxaQFtP4JtgpDgl5FT3XpFREysPW7OMJwNv\nLFcM+vSdMDMZP72BO3yE4Xo90fG4PQCT9cox27VC63d88oErtcASfejQOQUo\nPxkhj1LZw1I6YWyzz0+LqIXMuTrqS+SqtbXmVs5pR5IU3fKpsCZJ5Sg6DJ1d\npz7CXclvCYsjSULu0IeaQhES86mdxUyBIyEXsPTeHBnwDHzUv0ld3OdS499g\npRJUrk/Ce8uO2vzjrWbJVYHnu1SJwA2ak5QtdWWzz4fp7RKXNWPV9d/OgZuE\njapbBvBKVCFhE+5M3LpwZn0v2ggHg3k9UhaJpOKNpwT0YTmKYs7s226KQgdh\n8YXo\r\n=EHdR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvHhlCFmHt6T0i5XCcJuSuuFdC+62XGGqeFRpCl1xdfAiEAyINP0eNGq6dgfbh289/wKkpgjFsL6Vtjs6+CaP2DjLg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.1ac5b9d4.0_1597256831632_0.5409248596381444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.f17f5052.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/snackbar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vpBCDnUHHClS373U05upSN7iC+c/sZWknah+vlBEttYk0U9uxUzm3ORVZgJEGiElV5v+z8PDnJFlIO29iTJLEw==","shasum":"3b76e533c828542457d9f1be4f3d1db2e2e4294d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.f17f5052.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXTpCRA9TVsSAnZWagAALKMP/R57fnvhFmi3BMeKgm4v\nelAcuToWcsvTWXEnyac0I+dkZk1LH2Km/LbaUWosBkOFcKJTsQa+96OUMiDS\nKcdyUlJMHGj8XEAGZ6wdjqoRZFKJhyo7FTL91sVmzKgmF0ys3eedLm/ww5Vm\nzA71DPKfCFq1orgW/TfRjrrmN6KiMgJwR4MYNaqoNvvBMASCXxajRboIDgSy\nsXYtH+Vw0AQDIsUmGkEH4+zHdcIEjpOM7zENWR41PeUd8w6R2fZViOxleIgR\nMtrrYlKoe9PXbhLhVPeKRzSYc/Ey4Hn7esUo5pRY8utvHxIJJTT+BYXOKjlu\nxqVjZHCER/K+AywjzHXNp35H87OciGFEQ6HLNXmKtcSIkcTi6wnkxSoXpzr7\n7CYbqKjOnoZ2zjKxqMHdzmWT2dAg5W/ok9z698s7iCMGZYDziifjaCaH035N\nGbhqFhKcEFuWyR/QbzDbOBe/NXI7/4LO5UGSX9B6n5I8acHCq+Mc3uE/XSK1\n6Kzdy/IqM8s06PlaPe2L7HxuRRABMKzFJSZuThE+rVhVfL6WpsYAeAIO0Sni\n7btzD9A/zg63ych6z5UaQd9wLOLoe2re8qqiT25nFUj/S7C2OfWNJoZCohzx\n/IM14QU24UXacm7P/OQ6p4F9IJLtXhGW+vPeoSdnxk+M52Dc8NVKcbjmHLZ6\nGGzw\r\n=nADw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBt8yYxeXDrHphIAQH1mFxFT/4J0uLARIZ41BUiiTTYgIhAJ/XtoRlztj70WaoH3LULQvsR206xwfCz4josvr7tqYR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.f17f5052.0_1597338857320_0.7095932751725165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.80b5d20d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/snackbar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8I4UiHFUoVvJ7BuyN25AN+b0Qs0vyqZt3i85Co5/86+2BrJHNc/MLxuqaDTWfNpQ/g5bTWdZtnTXecPGRGARMw==","shasum":"aa31e9dcd49934c1e7ae5d52a3c179bc62dafc8f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.80b5d20d.0.tgz","fileCount":20,"unpackedSize":83158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOiCRA9TVsSAnZWagAAysMP/jAmvvsGwpSr5ZM5Fk+K\n0EMwITazrH5NF7HqyS1jd+8S9kiLcKd02BNqttH6uIUXPCrIaD4oGqCYbq2H\nYn27hFMCGMAk6udql0Z9nhGYQ2b59asAhy/zSaXVmDaT+nBM4IsIyXww1Iyc\np5Q1k+yL4skipPTFGfUnd78bhHZzgcwOynZ5QT4LGwwRybjV6+wTEaSM8ymE\nb2cTW2u71jOxlaVmpjVeJV6fNXPMGB5E40qYOL+/kDK5qphDBv5TVeVGhZzp\nGnmMTuS43/BL3naaNBqrgGTP7azdCXiLrDAsMWuX7MyblhYE9mz8vghHZ+iV\nbOb7LBvyMwzQH4AajqY4dnxJ6LH8pUJRWIdCRJRgyknnyKrK3rv6OosASOkI\nTJJBz20Gj5cWptfRbfoxS3HuzWUwqPr4J6AjZUx0ezLKwJyrqlcqer0O6bBo\n/sfNQ3Br3atwO/48LVuWnsES1m5s4TeFK6PbrN8eDGe0wnu6JaEdWIMAVasx\n0V/aOkuf3tnq3XyNforcgv2JLaRlue9EDxjbRELfD+gsvTWeWVt2Ns3FjEWe\nO20q2+iEZ9Q8cH5hIXEk4foKW+wV69zLkxqHGsGYHRTJx4vkwAH9gp4jt+Ko\nyXndWHxXNXg8Az4lXxAd6UyaJNoGwS2fhAtkLTNCezVTIHmOP+P2zRldNnBU\neRpg\r\n=dQ/p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHg2SEdyXHxiLz0eHgARmW55FZv9tlQcb/CSrhJT940MAiEAtsSAnvUtiKnbVbYUOGZJiHERey06DF3D4+GLeRoOjRk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.80b5d20d.0_1597342625939_0.037260101094620746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.758635ed.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/snackbar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Wpd4NorwCaz9xvJr78NLaOLQ2i+9lfjkAZNVwYUyRGzTwwk/YJQqu8m4Gh2yiA9LGNSgcHU3xs1/1uzU6Q6dgA==","shasum":"10729c4d2ef5725fa5180195eb68378d4a863ecd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.758635ed.0.tgz","fileCount":20,"unpackedSize":83062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsbjCRA9TVsSAnZWagAAhnMQAKSVzNKUrHpxqgy3spY+\nUopkSMj7pNEed/G4bDmr01B+ErVZlgDtfjdgRM50pS3ma/PZS2miI+B8jNPD\nBRQfXxhXd3p2GsGHJdDSD+RWcX4+jScZUaH3fHZzqQgvjTsfBeKs+sxq9CPW\nREorfxUWxrPxS8HG7HCFL3tMthUjk9ZkZ1JGqBZL8V+0uvG0SPbTOUXK+QA0\nqxD2cUe6h1/nIa6q+wNluW6VXQXjubBX/R8c7g4kf9dNnb26OpWG0o4l/twt\ngURm4HQ1BlrmaYxin0u+S8nioMxaW2N/whAy5C6Odp0tatrufwYX2qQIOWWE\nGowWKlxdMTpUiSseRsi0NQqbnrzfjjE/xm9sUfky0/O+SJrJ0XBPqw/PjH2R\n786qnvVQlX0gGwYsgd/ISfLOnHCCGTG/mLYTihyvFGNjHO2xDECoex2oygXa\n2YEKlfqELG1WG2zEwB61qnVte25lZwvL5f81IAnNeWaNLsnqcg6h1LXDfwe0\n/+S+fKyRN3s9Ir9uVFJoL7cljxPcu5mnco0rZlZkSaJwceg9fa+Rs/+co6dl\n+6Rz/l7ulpedm09Q/QnEYmoeuT+aKY8Wbr+uzvIekPlIjVfxgMcbqmXCcnwN\nbjzs24gy5kdXa3Cx6sxg+sg3yFgCNud3WnRtAXNm/o6ZJBTPox60iCF49Vkp\ncfpr\r\n=rY09\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFaoKoPFdh2qSD5UN9lg8txl7XvI6ds88uUfLQHgb9GEAiEAgXZIcOoyTM6dY5ikc1CrjPuyUsJ9Nb3lP2/4J/Dv5tQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.758635ed.0_1597425378940_0.4768565604405113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.18d6b808.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/snackbar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oizRDwEUKOr/N9wJO5FP61Namr9DOjMrZKXF1P9/SnMgs/dN7mgCDdFV+/N/YS4BzoazDfv/b/+aFsTDUloUJQ==","shasum":"9334e90e7f45fecfb7bbed729df286f2c89f1850","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.18d6b808.0.tgz","fileCount":20,"unpackedSize":83062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlGCRA9TVsSAnZWagAACxsP/02jL0uWxcG9QhRzePkx\nrNXmyEKtM3+/Nu79yqj3Ki538CvG+cJi1SldnCrSQHRWfaHzdNsKfpx+xwkV\nZVMJsrmNNSMGOjYrkWqnaJEj62fmDqH/nG18ZrEg1E6R5gg25G+Pby3USA29\nLKaiDD9ri++244oixvpPci+z02xC+8mNqBcEthV20WBRkd51OhEnxyKZMV8P\nai4VDZxd4hJSqnUdekYqJLDKptx1CQu6ncbJtU71rnICu+KdXciU6P2q6aS4\n1Hd2SUXAIKHM4O7mSIZFGsHnFbG02DRGdmmmu1D98EjCdU16rJxYR5RyuWJH\ntNMK5cUgIQPAT7kn3LUmq5xOwNpiEC1Rr/qNZllKB7uriPP3Zm2GfAHx6PpD\nOx+KraJWDYy6wrUkvq6izhkTED1Kmw77puZc2EK86tVDsBbP7KF9499LL5P2\nss7FU7G1e0UqlvKtuy5zAGthBhtk73V+QZMBB/iTckD9TeJBnhb8PkP7N9Du\njW0W2mP/RSCfB4zTRxP+SEBvvesFSQQGE0PKei6kqJ90oL0IazwtrhQ/mUMx\nQYPOXmc5OJwcmlezeKyt9ZAAu65BQ3vYtlezHdMYWq4Uc1p3+0+vrXX1UCW6\njI38nEBkwmr0Sb0ckKv8l1htKU1+mKiHEsyL2mDHe7K1bl46bQXjS2dzxiTX\n+Fv6\r\n=rMD5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH20NVBDaaImtX6l6hUk/mtwoe0Y5RzX2fhNb8GE/JAMAiBZKazpXPCFmrHaFP0oz2WJDQRHQn+VUSyO5Dmr2EcosQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.18d6b808.0_1597446469561_0.7722414215581652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/snackbar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4TtBWATXnfK3YTz+Fsqno4kujiiBEBPnWpv1mXHGGqZy8Casem56GDUDGV60PTgwjaXo5POjD07xMlTVSHQsFQ==","shasum":"2440f533a34e62fce8c1620351cdfdaca39f8fad","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":20,"unpackedSize":83062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwFzCRA9TVsSAnZWagAA0tsP/2fM12iZPKui5cNHNpTM\nrk76ukk8+jtnJfcXWrytWJsv7G4iSRlMZXaamnVflEYpaG8P/HQNqJoGx3/o\nlFdr4FrFtiyKzNQrxM/LDW/i1wCUsbyq1Zjhi+cXxvO/xYuQMWYWpPUpl7dq\nYCfs64DwjUmZzWZVWz3uvpT1eqUMMCm0nmemVkF8QqVQ+6h9c+SZxC2oxUjv\n2sNX77X7tHgzgwhMppm6Fm3X2MwNPNWGH1Cda5+EGCTxg+HIIvv/SZcGLLCe\nMJVX6Sq0syu64dGfzqdDlyFz6bP6f+PGrQ+XMQGXt8W2vect3EQ1TrfAD7bf\nV7P0l+q+c/sdkf/Of5wDM7ENkjNtodK09izlDQ1uL29SojIPp21RLx84oY1e\nlbIQLsYaYouxycGlygTBbfEjn8fjuX1Rubp43q5X8RgJfmumzW8e4epnu5Fy\nL1wUyTB/OQDEivZfLfkr9ZvZQJdg6R8NFMUpGll9zGYeo9zMDbXFEo/43HVm\nUDncAQSMh/Yczk5tQlzbdcW2AiZz2bWVFKE6OpW7jFfIfGuPLiMOQwnEi2kJ\n3GSvaTXQWh+a26BT2JBEljUxDfMRX1bD5jaB9T7f80+lDDt2hKU26KCf08Cs\nywDDittfAzaHG5Mgn/ZX3De/Fr2prvmU0e+fzPAeyIcn+sDYePXrxqf9+rX/\nTHl5\r\n=IeiW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9rFilXaPVFEaNKEhSO9GKMXwsPtVJ5s0kMAjUcdxDnwIgUV1azxMz0WjiUjqMYAFiGxIr7EGa4xlUa3rcFFbT3qw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.5f8ffbd1.0_1597702515215_0.7815299318606597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.8604d59e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/snackbar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mhfeYF5b51nFbFfLIBvHqJdWa5T8IFTpev6CK7CnTn6PaVREA2qmsOILofxkTRuwvASNytckRThF+AHlvyd/lQ==","shasum":"a7cb7b55af0a4536dd302d1c031947cf3c2f59a7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.8604d59e.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyiPCRA9TVsSAnZWagAAB5MP/0VL7N4edcK2ggDUQnR2\nufx6vHiz1J7N3Jf1JFavQ76wpqJiHLjnP8L0Ki2eFErSO9NyFmdPrJq+soBx\n0shUdq8TL5V8BvAi7wd51o1sGdl2uIHv8zcipcebhPd0Iym73WopocXdvwf6\nD8HkffWgtA5GxRrSWCZWzkXH6rWPWHQ7cUqjx1IGXnTUuCkG/7F1NwKmrXnD\nN6YfZN6lwMnE2Fqc0mJZS4yQgGFV+0dWxjogUdsb8FIB1rGlAY4JiQhARIuH\nAWJcykHVr1CAc16aTaJ6FqrjN0HH6iw5iDxR5E+NGn+lYMAXv3yDHqHqjXSh\nuSO1vqihD1gODrphEV7r4KpjE+MdLzBKt7FNX86+kcQXwVHvh9nO1SznZw6F\n385JTgjF9yivVCmf0pC13S/hQ0RY+wcGQSIfy28uTtcdWZ27N5srxjo3jWTs\nAMJpeaafLitKedorg7gSj8tVtNaq7VJ3ZspmMcAVyTqQd7NzD58FNp2Ppstp\nmoAhtQu4ti0N63kWP/MT0xxNrxz2DGS3rGb0mohsZa6UR/aGRlAWHtsTCaF+\nwC7xsK2PSgE3P2NpiOe+Sxx/0iZ1YvV1mLXtDiJ9nNEfW7rqVwsR29Pn7SXW\nK9pO4sa0KhV1tKJC7EPLJDoUV3QxlixnRKgrDYfSXG5sv5HN+vn2vLlwECzq\nUugb\r\n=d/XN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNaEpw4vCZoiMN4ZF4DzwMvwVKAWYySIHK0XGOa7FqDAIgRHP1pWec8/d85bQ34fLsebgNiwFzgTNqE1e22Fn+dxs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.8604d59e.0_1597712527320_0.7761788243186363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/snackbar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iiJV1Msc4upvstxod37nEAu9E1r1Yq9mPWGhr8xAwnZtTa8zEMny9B/8Hp/wHpJZ1a09ULLeDD6i5msw7lHayQ==","shasum":"ac21ff8fd87959f747924b643826ea47dc298df5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.1d7d5e34.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyofCRA9TVsSAnZWagAAzsQQAIUWywVqrNfr/EKQXI16\nlDbghT9h/5fwHDkLxrSbzH/qp0822GmBRKAg5e8gJCD6Chb46UzQFmOIVwkG\n8WE8+3tEKpLpQ5zwMaUGhaJqc3mXAg6K+8E0Q4qfA4x55AaWHlqq7UqgzW8J\n96D0V/HQY0GnihNspgRCU5cCnW3g7pzJVCcGzMm5vjCR5dgGGULBOssDFVk1\nQZUucRZmbjCTHbXPwYI+Q6MQsGLHL95KUxK0lPVdIf65jppEzaJzds/KJc27\n9GgeqKWyv6ip4Jf6Na29n0G2VTi8QAa9ZZw1+NVyOyiwN4IVuafI2s+VVnNb\nOwDeRSWm9CtQP3T+lHR8CuV8kQLok4D8lp0qgrASkfP2HlnnKScDLFTvGaen\nwtnuclNPLGQ+ke+ujbhBhg9y6OZYLmAf2YbMU4m4gc/HEujhCtQLCcePmO3r\nB+RBk3FPyCCOBNf73rIBX8/e1dYsIH67DnblzjYPO/vkXmtck1ei9mHU0pPx\nCHu7025X2eFUe/N+Lc09Divc6W5e6tH9l9rqqIrgOP66zkbIvVIGc8BVYd05\nv/LllKFhzKyoJYSPc5baGqswaNv0GGc+bQGbJuGFb9qN3cqCGVRWPBoLrijV\n3w97860s2YNrDieIi9X+2R3YUhKrK7MHjKYqNVJi3VsHaT2PLpK9tImjxQjJ\nZKwT\r\n=/d+b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZ6FE8bMHEhhDdtjJSNjAnVjqEgmM8Xn4yIx4wTpZNoAiEAs8Z+q/L1kNuM3H7bXsRVi9fDdiAGMcVoy2KGvTsF5TY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.1d7d5e34.0_1597712926646_0.31964296348448773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9cc95c07.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/snackbar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-B+9KKIwfgss4F4d/BTLNehu1TG4CzJktscCIQAvX/G5xwxWHTertEFN7RyJVRZs1n5KtHXXYlf0j3fP5QzAzUg==","shasum":"8d045f7470b1e2ebab436e138008a793d8cd7928","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9cc95c07.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyvoCRA9TVsSAnZWagAAiekQAJA0uBZ97CUnb5uVfAzn\n5HgWu0sb7PvUv42iUmleEKq54/iWkparCy/lzVYVOgq4mgcWDanCaQL4IJg1\nkTqAiEeq7KMSrHzLnfI4nTHtaxlQpSN6UcvyKlbd35wUWxTRQfiTKXMgl+Gb\nDbF9TZct3hR0ItAwySVaSrDWpHr5n0L+AP1bq6+1rNBxhAyZYgvP3JRX7Rl/\nfNOqor9E7/aKYuLYmY8jIBQdsJGMFFHAEli1yvd9dGYA9sOPGiRQFAVL3lD3\n1qVK/9QACVm9JEcjuG3zpzKRTSB444PT+u0NKvW3rbwz0OZvTzEgXE3HvSLA\nKgexV92tFPrJUHQZeR3OT9JCUolCtkoH5xAmDAyLNYRANmG4IP/b8ptndks7\n4N7Mg2g27BNDjeVzxHV79ptaVg8UBCSrPKUZbrCVd7bugUIHoH/12juwAiKW\n1jv2PQCXigGHHWnsgdV9Taojb2Xr3PFE6apgqWkWPORWRZizpkaPdoqqqcc1\n7mMvezpHhj3geVGCb89qm/snaPLF2x+t2ji90B8mvoIg4ATQSPbMf3gNYi+g\nJorvT1Lpz3epIZODPEfFmB3NoqzXpc9VJY3LVQDeE+wujz1A6Gk37RulXVzC\nJ8WugXFyvoQQmBtm97rZ3bkwPBpNDy55yT0Wh2XZ6+1DoCpfc/L35VVuxVWN\nB3LN\r\n=hZt6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFm7YEiQUVvv4n4wnwAphAlrQyPN+FeffeLhTZ0KNAUoAiAR9FC+5up9DFIbYN3JRIQTSjn4ogrAoIIhBNde8BYLaQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.9cc95c07.0_1597713384024_0.03341828846392603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9f65ced3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/snackbar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-voLVYOO1RI66lqlrzlPqhvrvyeDo4zHuNSSwZ5JaBIzt7LSheQsaSLqyVP2caSacjA3GbEubHx9UZOBGxi3hpQ==","shasum":"e30b6739ec68e216d7af033f04031200bb59fbf5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9f65ced3.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDb6CRA9TVsSAnZWagAA3b0P/2jvG+bjyJHSw5HAuCj1\neFEFzcZebK3x1rfpUzABqz2qfUbkR/631rc72XUKDon2Mif9JBEbQa0JtGSj\ncSvo5SU24vQvj1oMroSOBGfxgSm9p7oGf8IXoBr0SOxxPwzZBVMIzP34gm7b\nQAYILgl2WlmsTJY9kVYEGCNFUhJFJq5/EchiAaNl7dMgvSxlHRwVvEuWMkqy\ntAyQNIp1yRtEXULDNEGglOmM9Pcj58NpTG63Z1Ar0YJdrjV7zn6D1j8oOPnU\nxiIje1aTgXG/3wviDjoKZl9dRseJNkIq61P19Z1oOWY13QgkskrAghHEeV+2\n6n0vKgloxGG21oNKqhi6K1mIBw70EMtVz254SpiR9vgUY2+MzfUHPctbZoXY\njhKAWGfo2+l6BNSKy9JdBBhl9hhmr5h2gw8ZRHguawky26nCFsuXDsurR0sw\nr2KPwvRkGWQxZwQEX8gUYUUHv9mXlIFaTNch0y1HpckRb4LpBxk1sYdxUb0h\nNfcC7hf0BCnX7FVc6hpAr3ihAQK0hj6/8EyEd4ICq8Ctt4z6PXxuFv1N+X70\noRtnKheiyXfS0Lqp0uzvKKB6y4Rqv9i59mioDLYtxsmfokWC9n0rP62FTZQ4\nn7KLQOxne4QdUN+BMpHHihRnACbbOPQl/YWtxhlaGB76SpHDUh1nmbWcvtBb\nvBK5\r\n=EBd4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwnH8qiNrJQPeipWnSpbQq9sIl77yZtBXkP64YwJYUnAiBcr9KcOsJjMTAhQKfdCcn1cqn0Z4o49H83xPw/NoMVZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.9f65ced3.0_1597781751060_0.2737077939472776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.5962b365.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/snackbar":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.66b8ed7e6.0","@material/rtl":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Fuq6Dx1IUPxeFFWtS71+Hs1rY40jukUME7qAmRzHnGoE++lJqGlseMIqOorJoxadkTWsRbM1f74k585nwRBVug==","shasum":"fa23051f947ae3e92fa2040b5687c380e17a8354","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.5962b365.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYtvCRA9TVsSAnZWagAA5jkP/2YBoFwVEKf8XMii6AF2\n868CdulXdH/5f3bAAi8bAFg9NojHs6B9w/SCBdlkfewyyocpZJsl/fT4FE88\nTC1OOjr/DhZq3yZrjwvRXRWuYhmFJ63eZHtUBJHAu4Fgfn/08VicAMjChUGJ\n7sga46Yd2FKkVT2iXZVS3kZf9BU86nv/f5K1lSXVKpGoPZmD4LSgHRcQjoia\nnrsSU2/PggtoV3WpvhBxno/quGAvwgcxb9l5ajwSA+lJ7aQW45zLklPOpKac\nEXLKJr0hvHICXjFaNEnJvf/Er20EaLreuyNQUk29BPt60IoYo+1CypSwtprQ\ntyKN3MSAf6bOJNuvjgV6sWB91HVCGpe6XvgZRg12H/qEPzrBLtA/aJ1LuHDB\nOt8NbYAVH+DcwcbYvmpuwuU0z+5oMqSVqfYKbV4lOezw8qwIOsYdv3upcYKz\nExjd3/tI4XoS2mSsxudfQRWtlZl09f+Fnz8o47Btk3amDRBwXqF0lmlBODIs\nGnvxFq7GNOJfNPr/HMXsmn3Nuhjs6v996QBqBkmiEsq4/vUkQcpN5jqfz6cs\nB9Istja48RJczVUYSP+fo4+Wj1tY6NVGP9g+zxrM6ONUzPFbaLdVnSeOfPE1\nZ/PRD3W/1HVUTGNH7cW8FBM3RuKaXVjCKdZqaGla1epFi22ESQncoicT0Q6r\nrx00\r\n=YeWb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTKBzu0vOZVhQPD7oMr7PUvUwI642mreHGpHFxCJaFwwIgLjflp4NsNYaq6z/qOydCpBpUjHcxsSL2jFf/SGGwLj0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.5962b365.0_1597868910622_0.8300132012630164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9c9ec756.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/snackbar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-v6BBJQQlqeO/oK3AUaXQDHLr8c/k88OPnVJ8Nk83yhTJToqMjkwmB6QeEMgzldVflQtVV4WfFp2/uiIgG6Hyzg==","shasum":"e0a8c5e147fe4f947f3ea676dcb013b712855a1d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9c9ec756.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPscqCRA9TVsSAnZWagAAOR4P/A87liGs8X13JGH3uwar\ngmCdhoM1i3V/EpEXw6u1Xv1z1r/a+bvjbyl62/7pGcRZBL3tyWakLdz/ND5I\n3H5BlS8u5kSIHNDaXMEx134Iw4g5xZv0tqDp9VNvJzap3lFYO2dGkOjKz55t\nklvhWCQxaRyuEWl2EvEIHmRZrdZit9ht4T00FEhRG0/QlnZOrK9uexSq7wWP\nXfXfvPMj3xjDeNWyykqgG0Fr87fCXAuXNhtt+f/Y6qNMfWBjy4JM2EEOh64S\nNZdp4IMV1UIBlFBj8MXCoFusmWxTZczP3YO2R4LHDMXTtgBPjVyJ9p6EsmKV\n8hj64P84v86HUtHGZ3EE5uSage1VglNmp4qHDXq2hu1ydRD5HpsCv0Ngm/yu\njRl9MhkQ1aOeidnJHqqBLvGyEn/OaZFPYOlCwNEObW2ZQktQ04KwIeTp0AQ0\nfrV6sAVHXPxYmAOwjRN/T42iqiYXdaBQ9DjcjH2jLzlypp9w1mXfau5Shdxy\nbTALq2Awo6BZWOsNy1VB+yLu4AoO9G+oeSs4dOFpkFf/Gq0HOkboZ3Y5zHnj\nA5niQDYYJ4TdwRo8+gyOuTECZtMwxNhO7u0I+BMXh3WmkM7SwxWz1G2IBm/E\ncLlonSbp78QeFuX9FPfk5wwrM6TuozL8B19X7Re/7Qh+NVWiol6z6VJqKSxr\nsMya\r\n=s3ff\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5YmxcB3y0t9TICfZ4udojrIN282o6dDMO26gYti43xAiBKw968YN9e711+w7udksaydZWueNRCewcNKOvM8ihzCA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.9c9ec756.0_1597949738055_0.30151998354413356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/snackbar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iuvQH10mgLcV9VSHszH+CtUWHrE+FVQcgdIxWzAqbg0byoQOadVK6SpLv9pWF4ESX4WegonK19q9Ta/tIrrlzw==","shasum":"fe7fafde1da58e7642a75538a9f6fd0e5499b489","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.fa0ad66a.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt5nCRA9TVsSAnZWagAA8l8P/RR29+MalEXy/gReZ2mv\nuBS0w0WCrqpvpvRR4hoGfQytAy5Lrnnw30/s6pwLizUtO+rb0A/BN/BVaFCB\nKviINZU5fYLoPPlDpJPzjHpsfISvf1ySJQemB4A8W4lm3LLMxF4asEz7Gqrx\nxqkUowK6cdI2KRcbrkAcKnJQBY2M9FG8WW9tWbFi3FVbVsl7E1C+3cDNp8CD\nyLeLZ2Iuk2nx/e196VussOc49AGz5a2Ul7oWsTvQ6S3xkBpzlrzbJNXCfrad\nSABvBy1OHkWsLMM+svO23qL4oKgLH17qieTZINT0TtCfQCjAsgm5Jx1Oh2Jk\nFp7DhIxpfS/25IbkhcXFfRwp/BRP+6cKxNzVt5yGlExh9+62jFUZtWiSAsex\nKvIQY6526OuqW75O89fb5ponZH6J6WaAtBAQCZpY5Z+3VqJASlpfGnuwf+x2\naEe2c37WctZldATWNK9TOUM93PXOvPAPL2KnHXJCledP3Sh/pEdun1rpntK7\nT8rnbr3AeQC7uoSSSvmVE//nsACQyJZJ1dbYLeWTUrZaplZRvuozbJr1Mumd\nHWguTGj3BwYjoZ4nMe8kKzQudHFh93+9H+CPhunhKBV2pWyfI2lUc2zg7nL5\nNOGKpGqJcNTeyU4T9ZcoIGXivJhwjNopP7ZPl8XmHCiN7OA40GFJbf1aXqbc\n5d0O\r\n=3583\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEksU+iWGgu8P28c+6Sex4wyVNsoIsk5xi1Cp8BHT+48AiABdniKbsZfsjCrqO35YNVccE6npbRSOY4q08bqaco7xw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.fa0ad66a.0_1597955687298_0.030300628296634047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/snackbar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rCz5s4AfVZHAKeCVx5KyTlFJGbGRmWi3QcdERvT6UscG0M4apmAeskRtbu0RBQ+GPxDC2EivGuxD96gQyz7h0Q==","shasum":"eddb8fea8ae342e86fc318d9483c63a445181454","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.06ecdd6b.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuw6CRA9TVsSAnZWagAAYowP/0CbS6ByEMbEW55Eko6R\nNG+w3un2+0uICSh8IPARXoy76VCxrr2IVEhfAo/6cWfoXK/ksBENYsYofTGq\nVbjrGC4IEu196URcqkCwu3dTL4Su+LGvMuMUbcoAKRBwoQEHDYhU+CdpNrsG\ncKXvdla7IAKAlPt9aibEljQXzAlvaHHxhZEM9B6eKztVaUhT4c3HafeaSn9q\nICXS0bwd2Fj6zzweRKsK7xBO3OZlw7HiqdjlEt4niTsV40iChtayfYuf9p8H\nNSQWMOpMeBn4PfCieeL5inF/sStY3l8zpc3A84luAntME+QY+5ubU+Otmban\nR1tJknZQQARA7Bfyveg6MbqRtqawAwaamN1LNNhG60gnNfoWj19XtSLdhixQ\npMEzXVdpfNC6Wvtp9LgOJYmzJRN35jnOUzZj3BzqF8MKjGci4fU4DNCms3sQ\n0KjUscdEEbX0FAlGNFr+TMq4vijHjGpy64p0T33ninoBb6DiGhD37IVacvUQ\nA+ilKnZNXK8e0pbniPre23ts0RJ0+E7Owmhugv66P7ypaUqicBzWpFR7KmkY\nR536pB12c61EPN7SPh5JYRuJXApZy14vmk5xBwDtbtRyUB4eu/7iU3+39nDD\nN1jVz3v6DTd4TWHEdhOjvU8l7emDA2R7TyipW38YdxyOPkZGJvOsHECyfnQm\nVaeD\r\n=oanJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGL6lz4BuOaiSfSmXn/e6TrAtZfFk9PifWyYe73DSennAiEAhV+ddr2yhRCMV5f5D7Jw/hE1YMFubriU1L9SRNNSJL0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.06ecdd6b.0_1597959226086_0.23318878838956403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.2bca2318.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/snackbar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hbdK6bjXRMq++hKueBimlWKJYFvffUL4yMftnyoYn3mXiF5CO3EI+dOAE6HvVv7TkdXbC0GK/qVqnCKKw1gSGg==","shasum":"34f9d063b8f69b501de8a22fbfcec5152115e387","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.2bca2318.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnLCRA9TVsSAnZWagAAP3kP/jCrVZtR44hcPuy4gYdX\nw7CrP2G6EsPzPgQEYmB4nkAwpmj00dLGVEhra6kazs/RdIzhTTA5EKsFnMVO\nRseSSy/vH7wsyB3uoj61XUNgzl7z2XzWg55+NhWr7rnu2JVAzzFwqNsa33Vz\nvjOLZC89mMOD3/3QZcB6t/fxDQke+fL4xfHOP7oBF8n9U+3BdNiu1+yzj7m3\nIqnBEwU/fL86Hi5YFq4+mngNvYbpTQrDLMrUdx7rKx+9GngdBTlrBDDKygPU\nOKCwpQCW6OiAlatIimUZA6eNNIVVPHvVZjhQvesb2mpYTQ7Aa7hKxLcmlDRD\nlMCF+gME4H6Ad1fhoPA3UqHZXR4H8smTCeZCgdbqPtJ5vaIuXSxDNKN+HUmP\nxu6LINxbPM4yBumT4219KaYdcSUZ8oCJNdLQBX/DHxKXFxXB+Q1Z/oDgjIer\n4LT4PHOJYTUIOSgIf4QPkaTQkvrFFARDd/EA/b+IgLWws6yO7xbSGkIw1nyo\nCL779Nbq58krBCfR8Ckk9/tYnFKJFCsAUhfp23t/JS+xeXW+ktS1CUwpmAGn\niKStxueuI2ScISsD+mLDWTw347m0dQyV9er5+FkTNDx41JPMDiOrbigUMxAU\n+QqasuTmvkhMobW09vZpOzV1BYlPrSsHDmd06JRufoGCTMtpuSuwlJhT1Vyq\nqb6+\r\n=EzIo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJYnzZNCd1nujeMjW/MbBZVO+OqP/lJiTw8qPVqMJlUAiBoD+KWsw+ARaX06PPkWXPK/tjlWIWZ5jb0r6IWmJS81A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.2bca2318.0_1598032331246_0.022930043661110178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.6aa47265.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/snackbar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qbwvhKjOrw2gOl4Kz/jatxbOr4E360RggN5S57So7SMv9uEBbHgJnWmFCrjm1HEOslgLyWaQCIoZ8l9map9iTA==","shasum":"ec9fdb208907bf5b6bee16582eb55935308a8b75","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.6aa47265.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9XCRA9TVsSAnZWagAA9cAQAJactZygLpACS7O3vXmo\n6/hjiZQuL7DVtlcuh90tr8w/0lPkbJ8oZ1SDa3bUqrzOJ1j4YfGkCEcXV8U2\nOjuNQtGJ3O8UNeX8/fKB5XWe+WT0PH4+zdqopvEDmOlvYrHV7ZcM+oKovXGz\na5+Oc9CCpx0q7SWQM86la+ptZfUxx5ZeaFCF0dLsoK0WzphJkxIkTpeBsdKM\nTFN/9RsqiSUA636rgpMPd4hbG595+wbtTXu66n0l+CAScqqEdiZoeURBckrK\nMabd3nZLynmadpK8kTjD+NuZJyIDjBDdKQdfcCuetJXv/VTz1bTtVlwLziym\nkhARDhgSJXiSSA0pM4PIk0POlS7Ley/wFAY1sfvqY3G0Bg0l5flVc25sjL7R\nTKThfxppc6oJeAuYSu9yMvmv2eeLazbOPwkK74CjMbcCC+kDjgnuZEeTe9ou\n4j9AS6myL8ql71bt2WoWLxtlcb7FhoW2OeqJHv0dsjSVA5JhVUUklCR9sxSj\nK3Ija+sedai/yoWbnapXRDL0phHO9JAp+0PyWlTRZsaSaN/Hl+4ua+GosCAo\noWB4eQjNMF8EHzMf0lJpelRU/CnyaF84oNnhelI4tVaYCW18fKdBkWkEJN8e\nMPtcAZ+zgkZ3qsJSQ5aa/xo9asbuENsICddrDc8Emol0kQNPQLnq2PlAOOIB\ny2PA\r\n=Fz21\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH14jsv5+WTHJl4DFIHf1HnytMhuB3I7cvOnKcmOIJcdAiEA33Ay1xKRO8B1fPFLmDVFrXn74JD9n4HvWq9wmYdFawI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.6aa47265.0_1598033751120_0.836669525634494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.e7202a07.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/snackbar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sz86mjxLF8jiBn/H250S4Ys6LYy6d/WPy9BWtUHerkiD4YDR3pzZAlRy+bCPkuUSxqkIw2sB40sSM+QENwY4LA==","shasum":"4094f585b1901c1a24808b4ebba704ff0f13f710","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.e7202a07.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB8nCRA9TVsSAnZWagAA5yEP/jK/mRI2UMhvuI3L7Mq2\n/aRL0m91i72ohpbUgYAMz8RiHB5JwUI3y9A613D0NZIih7mZcbqa2ywe35+3\nMJdluGtxwHCYBtUc3n5KyprVMMJyKHOtKpp7fd8iIeEoRyDtnccK0+cwMJIg\nsZ2DxG9kwiCxZIyftSSl/xWvbEvqKvVv+BTMZ28gEqut/JOhIrmkXuSMDhYK\nf52+VRLjjyI/oxe1XDiEFmxO3jOkxnVdJqNxXzISNI78clxemRtfd5yHWx2Q\n9lDDkyXGDIZ8CGRNLjdf71Qo8GnFkgXTJOB7cTRo6jMG1W/oK64NHSuDxKQ5\nxebCg3tugKb6K7yK3k+PMyPwmZXiuY22FW5/W8QWbyPIj8ZfUseVO/17WYG3\n0gQBY1c5df3Xf0zxJnJjTkBC5bGDmrBTHmHA5epGdWgCo/YOvtI8OJio50fe\nUySiGVt/IGQDUv5XxLjYt9YF5jx8LZXRMMz2vA4W+/hUDb02CQYgHzj7VQd1\npyVIhLQeiGXNyC3gPMvJHmShg14AQJfhz0p//rQF2/PtbsUUrP87B0rdH1Fk\n+U1774nPx1rstgpBZFc+hJggGwC9CbTYVm/kNS5WoTB5RhfqJ5vW5nfiCJFb\nlKKNZvo48fExRmtyw9kjsvJfZfOP7DJ8cKqYr8tdbt4R9X+uEadJfP1Lh/Sv\n8eov\r\n=nPTj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvUa7YFyw6xPIrA/dHvj7RmrPcgoKWjNhnYPyjOy4PLwIgYcDIxAooAsn7zrbOhcnStrNXbuttnKwSig06SM2gPc0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.e7202a07.0_1598037798973_0.31922205316845287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.f208201e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/snackbar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LXdapPXLdp4fzccnhmQSgiCSsKzj4/3VSJKcKO7MSe2EJKK2r1PxLVZyUaWVD51KBXwSoyqa42T9JjBzDh1qOQ==","shasum":"3e5db401dac02e2db62b3e67dc2049b6ce62da97","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.f208201e.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7iCRA9TVsSAnZWagAAKDYP/0ZGszAfgwAud/WykTND\nyO3Q2imV/Bulrqc2U2MWLxCD1YjzmHden0PW71WEay+JQEgUc+rLlDxcN8lV\n+h3qu1iweldT2VicTCqRlMEPVcEOQ37/XuY4aLqMKHRD0X2ZqURqHdtCV6xc\nywZY8F3EFy++K7vYHowcXrmkXToGeTYuVF65hGjX6pN8hYdJRMEaasJc+sTW\n5FHljD0RILb4GqssNoib/SG8JKVVuvS6gkHQa90Cqe7sbSzvP3sEUHcqdmov\nQnNuzprrr5sySg61GWga3NfFlmV+bQCDxUqoaiNCH0JojTRo1RzwLY2YGc/x\nndFetA4ObcWZpvw/Aj8/UU1QcjlyFBSQQseGh5ItYFHqMYZ9SR46yfg1AyBd\nglWlueArr3HVgfoCfOzICIM69fEPkXWwveIGZjz4HYQAv0br8Kd+fSkSlBW0\nfK+uZwKX0mGnSratsRUZ1/N9Efr0o+o2BseIha3c/J9no3VDAO+9rwiSVFox\n32zClKQVuFO43XuH3r9Ycx7kHkwOYxxduUGWbDjKEHD3qroWD69GcoZ3X2Tq\nUjW/N3/QazGN/v4ysBmfq1TvzabqXpEMMw1tcWRFpWlozHKfgQWFjcZXtuyc\nYItEZs9xRuiAwIZh6/TyUpXhxLISTD2EumjuzX8XQQ0Af6D9GO1QqICY+wvN\nT2fH\r\n=7Tcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX8eUeU6LFF+9XNrAfwdPXhr3++qcds/gm3h8oIwieuQIhAMjJCphrH29qERf+6Xz0ZL982tb6MBOmhGksRB4Maz+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":"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-snackbar_0.19.0-canary.f208201e.0_1598295778207_0.8103839605433274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.14a172db.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/snackbar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-avDsDtYDBeqXGcJAp+2/oGhNAOXbnRkd92XrjEfMohTrNk3yn9Lu8DJWO3FYARwyPj2u7vxKlm1b/SgCeZKxzA==","shasum":"42a63bc13534ca2c57bdbec4b374d74065302614","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.14a172db.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrSCRA9TVsSAnZWagAAEm0P/27ydyEtgtXn7ZD8huvG\nXGbXwA4Gx2ULKl5ioZIOoM45H/8H25s4LECDbEMtcblFlvgdkIPv+ilzYTKm\nLgoq080G30FGvj/KWU+5rPK9jN5eczxF1l9ylyhM0y54+/FpWTfSKl0yqdTw\nuwo+t+EuSSJ02/0ZzZrUzDCI2vRE9y/GjvtfjOICu8tGDCKmBMuL01i1TI9Q\nEC85PnZkt5xQqh67doEl0IIfsy7bBZJ24HmsO0YBoic7oP8Lx59E6mhGcwN0\nBXv91aCy6krBg5MyeDQkFJYK+Wo1bF9KHI5eEFh+dSkP8ktgdZvMP9RSUgs3\nS3rnOwJXyXhq4TA5ukpdrHYY/jSqZzceaBycV2jSRWVWlfY1tufkOjNpEFhV\n8B7mwEsbD+qEn/2lHoC3j7z+1vsGcCEfbGbfYqvkwmFlOqt/9I70UasK7uzY\nsblPwc8wB0ZYMi3L2aJ6IlDzORFauAeemzhFGRLvHTPHrEfJgDzSp/ZOBpRj\nozUJxz+yGPTsnrEL4gdAE48LuGhSUutiggCJYMljgECtm/NZwhtmrjan5ZnW\n/dB+bKJarZE5PFDlxxPawmOroUFJVZ3DBdEdPBA9YepA1IWPdS9WHAQANAJ0\ns3zrrmDkialARSv36xteAF9SNbxtjDovTI1l8+EJ2kWqColGg91lC6WB1KBa\n15OK\r\n=GAOo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqx/VObNJUxdduNJ1y1wr5sfTybiArxF6e2FrBVvRVpAiBO230xT8hrH0DI2cBOyW4d0vEs5/HZm2Ho33kAn74+xQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.14a172db.0_1598384850007_0.6880401484778398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.e6c1038d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/snackbar":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a1c65593d.0","@material/rtl":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CFr+O8uW6sdLlCVzxBzjZgmrfDtxAjJ29MlnOonKC0ZXXu6ogwSXm4C48g76PrT6gPx3kpD+b2Ah/d9M3LQGbw==","shasum":"ea0abc6f1546a05122c97b217171229c298ddc6a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.e6c1038d.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtTCRA9TVsSAnZWagAA/UgP/2ipG8Tf3uMECwVM9cR9\nzO7RlQZKql9oYxorZ/NqrgSEnhqvs7Y530o5VwliQaSX5ci0rfgAJVQ8wn8Q\nOEjol0MYWA+p5Afeb5u4ctHTjhV3Le7cWtRu7cwcUCDWI0s9E2d2brfWJUll\nGKGezgsljqIHkD+QvD7WmFwzk3GJWbbYJ7YwpqiGVckwr0WO7kIYddVXgrvz\n2LkIWqIqDjy5+F9XebHL8ZzJwFLQ8x1TlXalpZeOdg8Ihv+Nk/BNMQVCB0sG\n6QcVQHv56ehMX5hiR+fzfvoZjxzVSvT2Kl4rA1a4LZtBKgKxCMqts/FAUfES\nNIkWk7PISHp/W2VjIT2mVVN4vkV14IT+mGtsxOOOWqz8s+1bFuvWO758NjtF\nTONlmElx0hX4TScl3AyZ4OGMbNzlxDJhTz3kqseuBe0pqomVtFWAeTHdMlZo\nUMIWIwhxXnMe2ii6Fv5ksNipZZlEOGi3uQ6zHgZHyIpP2mwQJEqYclM7U/FQ\nYmo0gXMS9IYLBBKoKsPDjfaz+wFFBwG8YafVnJi4YvEGt3T7qBGPehd4gfXC\nj5cARjYnmb/VfK5NkcrE6YodrxCD0kkFF+3zMIjmx6ME4qTGPjEv5ZpAbs+4\nRDmalY8taHCzYsJzACiuplasjbtK/DG5kxDkmucP1r6SraZ5rLeEEtAY8yMn\n+oc4\r\n=6FuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGbGGk/K1tu4KTsFtYexP9OpQYfuP+s+SmZcj7JMzjegIhAIw6xsuqEs6wCIIyxxZzRcgLDWH/gKkKICj6RcmBu5oU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.e6c1038d.0_1598557011338_0.6944065123021677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.34012082.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/snackbar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.238216fc4.0","@material/rtl":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mYwG0zG2ig6/jDl1wlUpNechcK2G8KZQdf4MWbldwtLtAkSM8b6bmgiEgIl/Tpec6PWHxTbXAHnyGZgewuNBFQ==","shasum":"564e6b1571e9801e71b1f0e196897ff85900cc6f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.34012082.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA3tCRA9TVsSAnZWagAA+nkP/icXaYl9AFaAQVkfzgXr\n1dYk0NfmMYe5ChZDHq6mt/HVVVxH11bSqtktEruAPDp0y9wSeHSG2FbT+NKc\n5f6B0/bdotb4Al6tYu5deb9TSyn9v4PqtCbcE2dyYja0ZTWgdeJaMU9WrHp5\nZn0NzjsMcvxeREF/hlTnGwW5rtELgEkCTgb6VU/CL880CnSbMniiQUYK06UR\naetEFgpfY2B5wVkMBFH9AEw04Yu7SkyqlC5sVA8VpMcD3gQUjisB8lTrm91Y\noNUQjc0vv/NfY3vxg75M39M4kqVeheokCQuy9TGu2RLxvGePViBXelo8EDQw\nrRzI1D8k+oYxMvwp2P5UwYWoFfDaMA86txQjPW4oUfAknPVK+UP844zHnpVN\ndfBlFVpv6RsyZPTS29n6lEuSV7LTJE5i1LC+ZxBuhWhIhIr0dIWmtj+pEkxB\nqzPx7RZc+f47Do8WcbbbxuzNK2WII12vpF6XvO5gG2wgCjoBVLxhK2uyKDDa\nrs9+l1cWOydgOWVstaGsRLe4LeqSqpH7oRHp0tLpeW8rLIPnehyV/UN5MQQN\n0qu5spvjpBxDeKTI7QLjT9+QSMioNGqAUru9wTyapj6+J440oHVDqpCiImke\nJe/thNalioK8gIYv+GXHA7JwmP6ml49YCpncIqwxbsP94bxxradLR8ehQhFK\nMsAm\r\n=l9Km\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvoM+zYdgVVd8gH0/QTyzAYgSkFmvtDU7860A7WPEIIgIgSJ9wivN29J/NE4gD4T1oTlz7SEN245uJLapnuiqDRE0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.34012082.0_1598557677467_0.2525820277907236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.c073f7b8.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KA0gvbenYDSSMeYDOVc88c7Zr4LNHKA5FZZrxlk0cNQPjWGiU1XrSfszfuSGuN4rlP3Cc5rLRdORbWrSbmQBdg==","shasum":"c008138c163fd132d9653aada4986960b7021bfe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.c073f7b8.0.tgz","fileCount":20,"unpackedSize":83046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrgCRA9TVsSAnZWagAApZEP/3kTypf7KgASsC6XdwLE\n2FY50wjJujradhfAZ9t01r47EYVLy76yGLOw05x8fZbpTFx2dCEYRVPb42Bd\nLPI+r5q6Ayy9xH9ZjfFtvEONf712NjLenDyvjfu7Y35CM/rUyULNiBwAIh+1\nt96byqdd9ubqQbsj1etZP/uU+fM+obTL0MWVGnzA8qwPKFaOLCFpFWyJiksr\nSW0EgwmuCzEVPyyuHVI71zC8yXMTtKG+SnZqkFFoXM5dXXPqp6PxzherOKj6\nh2Z3J2T6Tcmvy9l0ZHyk105Gf8cSJ8XAhvAb1/EU5ptmLp6kejyi14WI4Dwv\nxOGezyJsDpke0MBwjlRAVH9VNFfeOsxBh6SVWZBBoYQg7H5bQ7H8oD6asps9\nlPhMSBIGbwYMRr+n5X512jxsk5IW1pEXbCGzaeX/wOY+FM1NAY3MUiESvm4B\nQhIf/+MRbpn6/vwhAedj5HN5fJsmrj8KrXmHKKYnLgujJ09DmYEe8hERtIhu\nb5dvAXX624inaZMT21Oi8BwDipCBQoYeVJm2oWJwXMboBXBdBujh/P+04MVf\nDTRKmm92QdWTZ6UYm9Vyi1n3+73MhwIsjDh0XG5+cdmNpDbKE7RNGtNFqgKn\nGnjnPqCwTiFZkmlQ02TlZUVt4Dw9qYpxta4UJ4Z0Hle0AJuyq8ICfDPezO5P\nsZta\r\n=D+8y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpkXEHceiVOjv3Fw32+ncRxdPAV8JPGw/P6+okGMXsxAiEA/AAhRRFbuIaX69vtuiWiCCxOdNEid0MIVu/jXVrbUPk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.c073f7b8.0_1598634720384_0.34398208129812113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-A2Y+0qcI3khCOl63lJH+GtYXa2MFug2wIxUWctCNcGVZFXWQ0uhit8fUYUjkBpOpoWKgaDJ6l3vjQbaYFkRo5Q==","shasum":"8d8bcdfe925603efbc78f1e21a2ada92988cbfa6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.b7ae68ff.0.tgz","fileCount":16,"unpackedSize":65298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7dCRA9TVsSAnZWagAAD8cQAIIB/ZFQoGYcFM5yDZGg\njcKIovZeQtlidPDeq6Gm6VjbuIreNpiyK5Z0R/mQjTKK6kNe3jQQCzH9mjW8\njZdhBD8UOXrli1Wdkb/zsbRROM2fRBBL8zkKHcFE0891PRzbjVqsWsKdhTpY\n3cw2qg1UPSAt43/GXwX5/O7ShQsmUfyZyKB9q4SembvqWcs0npCpmWk/xwlN\niLobrW56yYJDqn4LQWv3Wo5nbIue0nkLPsGTmITXQvydNC5kv+SqQ9Av3hUJ\n/nM4i3EqxsSUGVV8TUfxSvrEAm1TO6RJBINEbluoWvIKkthAm2+AqhudJHXR\nmRHtmGlgKGPQ5wotj3zXjUVcKWGHo5qZ116AJIRYI9e0vYCrmKtjCuNhSJIn\nHQHXHV3Nf4iLRxhymal1Q1//uD6l7QdH3ZZ3ADWmKQrZ7SjtX+FjRw15R3VZ\nGDQY/27Jlf3tUchSO3b71AJFadjHlr+jvMKoKxTUojYPsV6sCujS7LWtS9ht\nZg03NgGdAbjeNyCQoG0eDXzXv14c0pEOqfZ9YyvuI8h1+/FP6ORf8frVUCZc\nAxV5NrjSOfoDkRAXVidIM78VhK/HPFpPyejNBegF3WVMhcT6Wwkqg9poih2S\nlm7QnrAlD52/nnOh4PLqbRycHqh8C/2cCE4+W/EmvVPonz8ttTYJpt1X/D6d\nanPL\r\n=WA8a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjvPnIptAs+bGIylZSHjCySFYYo2Uj3kaqtpzx9j2+PQIgTbzjZXNV3IrdbY6QLSXunECq3doxawB4o3b1bXwI2YA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.b7ae68ff.0_1598664413148_0.1015140636959746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.697e3879.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EYKjEzDZbk++1LPGopOphn9+v2qJ3ObMTlVFj5kZJO/+UDipcYcvhmLrJAJ77hqRbcfVyYD0JE5HfZmnI+J7nw==","shasum":"05887029720fe93046d3b23184de10ff7cc7929e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.697e3879.0.tgz","fileCount":16,"unpackedSize":65298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOGCRA9TVsSAnZWagAA9nkP/A5dmxeRezZ5+akDBgqU\nLN7+9eEBQ5zNs3Vsqs93qWYO6Jq/9kyDkUl8xSAfLomwxSVVKdisvz3BRYIY\njQZte35dybu3tBZldBBEVvU2hCvHTLvI9z0S38Xl99NH26LjN0UP/itb5ttz\nWigH+lA+GjmoNB+jy/lJb8/sYMlOqJxPLgzRlr6Dzt1OGwXHdn8RGiTxFeN2\nAoc8GGBM/B4xFPWwBZId8Y0I+D0/nWN5JYDwrgLZrifOG3J6cvp9kbUrqDF5\n68W2UHqjYQFILWYsMxyWS7w99LNR3KHTJ18fNYalJ3qbGgh2w/t92L7ECjSw\nvyGRQJTN6Df5Rd8uorwJDrMbSQv0SBT7hXofLcaRb2gqEkDAfGdNI3sXk96d\n83yUm0eAmNU+HjBo3Zt3BEMMe5CvM0bIwvNL195a+FMdlG6GEaOacAMtGvhQ\nKyOYs2sSZcuQygUxLl2gaPcM4Yi66oXTW6QMy8uleKCbM0iYEwNX93KpDrUt\nlVaL1t1+NAoMxV5yvOYUT5JIkM+mlH7tO1ac8VvkomsmygggWhtjWDrlq0oc\nQbYpaqAhNcNUqnUWdzLCpIVBFTK3QGwIQXS3lmDsg96+WvhUjAF4NaBhM4kR\nOsEGeBnX43w2/N+0DbcHlo1tMeLafzyjtM6iOyy+yv9PUG9D9U9PNEkBadvF\nNLi1\r\n=4gWP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGb5kTsgUeRIOOE+BeteswhzJU9C64NuE2fNYzq9Ak1vAiEA8STJgnGgLp/H39OBwnoD+7zfwDY5kkQEaraspPiLwY0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.697e3879.0_1599005574061_0.3124972735511662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.eafb7991.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QXMuVzOdCKzpJSmSnPAi7Moam01GKOK4M1xIKs716xHctdTb/BLB2ILoEzT+tcaDf8AjffT/lNmpFL17J0kt6g==","shasum":"88cef0149c904596da156a1cf90b4f3ecfbd7fbd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.eafb7991.0.tgz","fileCount":16,"unpackedSize":65298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDbCRA9TVsSAnZWagAAfeEP/j8DJERNXod+oh1mNJy9\ncZVkgVFqYKpAAK2CYBrv/bsGGzgFeGVun+B3vdbJeUQHVnqol272tGniSxXY\n4fikNLDQTKATPc+2OglubyoBTVYakdQ/s7qEGMjGdB1llzdaaiS8iYKR4gs8\nNgSkj6tcxvsQhtO9UQwed0zKtMHiGmKR94MBqu0YaJB34S8qPGDkgJGSyW2s\nm07g17Y+ERaLxds8LJ+VwWBbFkHPwAeGm4RCBKQKXJayUKsv1S3z+HZkUAwH\n+eHZb2i3gdQVY7XClCeK/LuoZMGELE7r4IYVvoWRsUKeMZ9wmFcYiH5mtzah\nNfEPGU1OllXX4ryNtjqX1O3PTCCclrYGOFEBiGDDdPPtdKrSmlke6V7TC+gV\n6xaN/NsqHtHqTk3sKh9TqlzHukxaF+Te5CDodaHtNTAUi6mUGLcBk2c1picW\n/9wNBBxP4pvFFN9qyvQ+Iabxoj00mgJ/HH3c80D7XyclMHQov74AoVvIXIz+\nGG/Ow1Ub83TpdXpYWy6yZs2D8A+1nZXGmJEhi32f9oLb2tXGLdCO6P+TLdn2\nNYzwCqMJ5a1jxkGc1ltc2w1TCaFZNxZ4v59bhsA3lDSkugyzPKdN6qGZyd7b\n6QEjz0PnXHmZvhyFQmFIQAWyL0xPJ9Z7KuBH+Fjw5KaY+t4yf8OMUGSgnnCe\n6/h+\r\n=zpmN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUy19iWFIr5htNv6zRdVn8cDOyYR41iNZspKxNj+PJVAiACfcgp2LfwEl7H+cQLuDcKAKJ5UixkNbLB+ZApyrhYNg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.eafb7991.0_1599013082506_0.1618089401987135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.606642ec.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Re9wjA/uGz40GW4edSHrppGwIjTg2/uLrXuqBqTICUsv76qKMcqy/J/7si2ofZum5WafBSZT6pPtruAu7jtZ/w==","shasum":"043c0044854fc1a13f2fc39c4fd1be0f4b50870a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.606642ec.0.tgz","fileCount":16,"unpackedSize":65298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAYCRA9TVsSAnZWagAAZEQP/A6X02z1ZG3IGFPSm/wF\n9wf8cYa/zNRULyM4IorsrhFIdNK7eMSF9gd9TScl2SLZXj9pil7eU/hw0NCn\nMjs0S9WBBX98bV0ZuTfbepZz2viiNQt2F0zz82xmtHlNHhTosthXiSyvDMs4\nEXwe/sA/SwjrMzlhk4PCYR200TK9v4TD0GQXprIxoG4leJybccuJnGSI7ZfQ\nOoaH8+eid/2diM9U64LpsOrFXfL44QRR2wxQGecBXMz1HAnxjTlwTBrSGIOx\n0sEgf2KbEasgOz6MKgwMGuoZNb4b/Y50wH6sD11TAmubSYxYJmK98yPlvwgN\ni3rpMeoH2rP4etsb6ubJAqDljyHjRljhiBSVRFFM1qZd5IbKk9jHzfNzCAwV\nQN52eJLqo5XaYaH7LKR6WUCU8MLkJkWLt5UAEBSWtessh2IFxzBuJHQVKvRL\nC4y6cc8rYKzboxYlYhMFn8hcg4fwvGDpP6YmqSWbo0Mgjtk0Bg56eEBW4jmE\nnHiC8TBQkJxKemBc0SqurPfdAEMvFDGvbBuHi8k5AQBq2nU3k5BFf6rrgYgJ\nYYnOEhgMUJqY3AkIcGayp8m+VZFX+WqRfyliPaHXNOMcF/biVG9IepPzIX9J\nW+oT/P+CA+ThrS03szOBgXzpTO7Snavk4+2OzTzWf4/UJfftJyoNeu2HyXob\nsrEv\r\n=lfuw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSQCBXm1KiYI5DvYCpGnwxBLXLbX3JEEdvh2dEp3YTEAiEA8DLznqvDTcH9qXBobzAtvKf0C/S7XWoilLuUkOo+A3c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.606642ec.0_1599082520315_0.21012355914173253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.ddf05c42.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vC64d3Cjt3wH801f+hzZVx6glURYb0CqKFVJjTv5xq3CX1uqJZEbspLHle0ezXaKxI5Mh/sc7PnHldmVTbNw1Q==","shasum":"13ffedc10827fe0d1aebf96fb47aa63a91e22644","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.ddf05c42.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPUyCRA9TVsSAnZWagAAXGcP/2cUz4RBitiBvMSl0dp8\n9+lVUVVtyiMivvdAulBTjyIIb9kc4Wsp87SxTy8+ViXXCYmt7Zgcj/HXw63I\nXF+aaEEteMAbotNOZ7f+jJAlSu9Wpf93s7H3L78e05g6ISj5F3dPFEQRA+q5\nC3FfzmlQXxDUQJ9MiYLW982tw28YqHiHghTP2XkEY9vuCJNgP1fyD1dK3Qem\nmQPcpBLU4CJ1Q1FVwae+FF+VxVVsKZ+mNXZXToHc6miQPXbBZSEo2p4BbwbK\nxgsmXbNUxjftMiBdFqvkvntsKAfnFkigFdLQpIDZvvxfElrMgm9ybeE5cHHB\no1m45OGHPiAxIXuIjfnyzcFgwazkzXmPctvZX6yOd4W4xPNCEP9wkVxmfJh5\nfQTE+Q0YRx7lHC765qC3AHAstwI2Fc6Si+QAbR5KTghpnIAGw7XuIjyBZhIR\nbgLzhTCNBfPT8y/1+C8hlhMQ2eLzndZWeLbFUo/SRlWKet6HpscOtCkZ0/DU\no0+pvdkH1hd3SipyXwIFyDYvVppVv6DsSQII/vx3xhxJnuyn+/+zzjoKPDL8\nwgZwQO2DXhuNZBVgRqHfIBJQTmq50PgL/x7z3GyEMhedhjacAJQFO8D+rLhH\nhdvXxI73pJCMRI7vJMg19Fnh7py7T0AYY3OwlraXE36l0ndC304ccj2SGbhj\n0DBg\r\n=4cg9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpSaq12vXmqyM4illIDAkmrO1Sz97PMS+AKdWdiN2v1gIhAPsGic9MrTB9Ql7NdLYXRyJJcXB4uUw/+z6Px/IhICBg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.ddf05c42.0_1599141169982_0.02820516375653148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.b889e6dc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2+efPMsxazWm56AGkXEJN92xvEqrUfy1u36F0EoqV2VGxfdt0ldJ8IYDmu3SQ9H45JtQH6xYwYRbo81lGMBSVQ==","shasum":"bac4afa14c1caaf5e3b5394b28e4cf5cd8de6549","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.b889e6dc.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPlwCRA9TVsSAnZWagAAOUkP/3MQiL9pTbMts/mJV6oy\n5dlkK2w+zutUdmCKVGowJXkRMgA/8holwWU4hUBjSLHAOCrnlPbjgyLv/SvY\nqnMOZ9sbGrEVLA/Grw/2PyCcds9iTtQJ3RZeL9VY1iQeLmbDj+lb78TmMSOJ\nHJrRFtL0zsdVrM5uswBliVeovtYnIINM0lIUj8ifu6zSNgh7GMwUzAd/fQ1O\nusUPVk9/z0mXSOZhKteJUkgM5KfgK7YAB5ZGxM0T6lqxzhO2LNktHal9S/gw\nDIx++M8bPN9rTpgxcJNAWXMDvWjxAtbKoGAcRg8QlCWIwPABHKyQF3qWUSm3\nWWvl7nofzLnhxVO6BhTMlwV2woJQqZCJM1re7ax6f4cvLhBjDD1xTCvfRrij\ngO+YJFtJyggVpUMzFUM7Dzwnh4+3mrkTQXSIj4kqWBA4OSOb2pX+R8wgMZaM\nBfLG+FXsJvvTEslTZopKytB2U+e2sJW7JTFb9MI7Gb8/iRX7Qs+qtX4PNbWR\nzoESoSrYWLrQ/oqIcja9guPu6T4++A2y1WEMY+aeNOy08DuI2dTnzYXSTofG\nfmSVRONXnIP0RSZ0Oi/WWpy6LC0jmGMk7XZoKlvcqU8atO+P428uVk7VaMgJ\nxp86lkuNcwOUHXRG7L+SpNh7AIfm9gYJQTwCAi6gON3RT3tNy34AmVXfLhrc\n7/IH\r\n=0K4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIELVhjUWRMkL/QzQxUg99BmRMqi/wWFktvhvIiqwjMpWAiEAw8aAAaoY/lefOJ5ye+lfVfvSR7kVwnYR7VEeGZEJb2s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.b889e6dc.0_1599142255621_0.048040294728088684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.aabeceb0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dgfer577Pkj9vkCQUbNRRRaVwJTmPCdhDcZmLtFR6wX8njB8vzAHGXRVhPaVgP1kvGud9Leu0lsfGm3ZB/d4pQ==","shasum":"b5e9ac3d733527d7d78fb5d412d52a07930a136f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.aabeceb0.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUqdCRA9TVsSAnZWagAA76EP/RnlXLCJPUpY1C21dui9\n89VSRppOKSLz0G3LA2lTq8YSnpeb/i4tA59qOjG3dbPg6zjOdkH0ztUpD9Ut\nNUzvPReelzldsAtWpTJhTLND7btciDZ+GO0gWlOyd86MMfZT0pIEaqDewNbG\nISaXCtiQeVI+rb/o9Jmc2UEuafsafv8N7SANyJCkpDeGFZFz3q0OTrdJZKaM\nKEtO+vCeQN2iVu88u7gvvcATla24G3BhEK4aA220MhTn84OQrI4Xe7MFYzqF\nhVxP7zvbVKjs73cVB4VbBkgiIvkk2bnvFqhiFi1XOsI83yD8yScEQyfnuHen\nhcErjTwOWOQFf5buOMFx1KYgREHvjIuzOCPaPVREq/yOQJFJs+WzfO8jsZuo\nie4lN30NcJ8zxFf44dpOa6k5u6BBwRd+Sfofov3vtHhdO3ieD62fpFqFlgE5\nPcWqiEOiUcodRVOOBkdQ9Jz2mlGGoYlhxowxQ6Viyx1oW4xsOCboQnZFkM6P\n93+WQWeKR64RwOLPioYlKcRw0Kor8BntfDQhwaGWujeQh/vUQud8OKyi2x8z\nVrkaNNVsyNPOtiqdpu5djRa/Ekmsdm8XKgoTMQqVUeIWBtecesWRJfGEM9W6\nT0+gL4rPFfkLCuczRvcqZ0DXs2YLvtGSw/bzgWuKle1iix2lG0hOPWOR4fWv\npCCz\r\n=Ic5h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQ2Q1EnsNmV92ZlcUIEIB52k26KY8Tj3OwUCaz22o4/AiAO9izg8OjgVfrMZDBzM0wneK8fy99Ypr4LsnvUy+XB2g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.aabeceb0.0_1599163037112_0.283573236022135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/snackbar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.911014711.0","@material/rtl":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MMyflBxcTOrlkHssZO/RecI309KAuhhDCRFVEbtD5HPur58FNcAjP31b4ZyxOCzV9Wz4XpA0fWSdmASFQLKMyA==","shasum":"c69700523819c0737b3085e232ae6ffb8af4c97c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.d8cca3a6.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWCoCRA9TVsSAnZWagAAgKwP/i7n6dp02yyatKCIsCN6\n4P43rm79hbtphK9SYxKlTE81PGsk+8TJjoixE//zH2ms7XBJd5p/L2/WXSzf\nXvMyTVK7w8F2G91SrvUV5VR6L3iK6oj5h+FwgqPyIsH1+MSv34ZDC7qy7dvg\nVf2jIkvo8exDq4blPVOl9fFfkzjR2177wYp3KGe1dUP2kKcpF05qAlIOGHqP\niGF+XMH3Dz6O/d7v+O4/WbNPzLhY4hQskJxUGnEpnqdD0Ud41JyFqudrVCMo\njOA/PSqkl8oEqQaXxoRPv/1r2TZbH8M9HWyzt/Oi7jTcmvgewW+N14bbTTvn\nLA4OpmSylHKCqnMqat6whj8PYTzWCwoJc73AWwl/yZutFzxlDtVAoCHwTH1+\nFO821R+sqI1IRoYb6CDn/jcv5rXABtWsLD/Vl2/WE1SLjogWiwy80SYC7jrT\n0tGXBmNcYDk6NxFUcDxcE+jXy2PH1QZ364siRA12f5VqMh+Es5iCRUsJjQCz\nWOoUylUPBVAjl2GhEk2wR8NtD8/Mqojn8sPaqbW/cEtxZnYvioHG56eABsTD\nLuncA4kiBGrwaQXH53IlycM0WtljFlnCm8SDgXRyZVxA2QF7kmddCw7Pf+hQ\naw6ug63SgPe9U/19jYgBun8Fc5OD2VQaGGRDL9W62N9y1NrQHnnEzdttTkhR\ntIoQ\r\n=fFzG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIADacQBSlTgGA48t2DBrb0pRKKJqXyvIjiL6N4ak4qO1AiEA7YGf9SThnmdgKiOpquRaUSRX1vjdCKpYMMStVydnB+E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.d8cca3a6.0_1599168680363_0.6274611902349188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.26d34b2e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ud6NpmnbP2O3ONYsxpDuDQ05UeozpHveLNZcATkZ3JgcyAleO5fElW8QUTssm7le/X+9KdBbi8nPWKZ6jxn3eQ==","shasum":"f613326faa5634e399a6b7e2593cf247d72d7c70","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.26d34b2e.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWaYCRA9TVsSAnZWagAAm38P/3EGsI+mldnHSjcj3k8g\nO1ZV6qczB5OPhXVTUrkufiJbXGxN4W3v4GilNKUX5fpSpaDqQZlg7fpJcZ5/\n5TG3fv9gWjgKC+Uo4ps98eadRongVbVIPtdaqS02NEoFykTg0Y3qAAGv26/O\nC6foHE//z2kXOv7hmJtZ/g4UUaUkyp1RjECCqFdKzxDY7Fz8f5IY3wMF8GyM\nAT/8POwy/ww0GK+YWOdbwjryd28SiidBsGcL4lmNTtHTQwcZebLW8UNtXGO2\nAbyZGhWMIKqHyn4PqdAh8eIUsBmqyxH56HeiTHO0D8he8I+JFtWm8QQbHu5z\n+EvxXLrtCBy4kbwQ2NbSazuR4q1SECak+lE6ReXYa5Hb2xkFbyTpAnkakX/i\nUDAQOsi/gKaiwrW0xcJ2d9xRqRxqHe6d1bzW6+xjJQt7SA/y/0wvpRVz17Ew\nsDYadf++InJ1Y5A/cDdy9G48NYU2qF/jKl8eb8g5rXfi5wIe+903Lp7wOl1O\nmMoJUAnwRKvy5yDqX8oB318nGSzNb22eeHVqqMJelcIScTRKt6DX97c6c3GB\nDYXiNCieJskMoB2UFcWmoiw4qNvUH4mYPUxupKw+e6WiGst9MillcgYYZo8Y\nmrjzXChiuaEvor+mn7lYCYyP/7mLDxPJOEa1uvBS993L5YTyP5KzvFcEYz/C\n7+hD\r\n=97wo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLQQ63fgElqKGzxOLHoQ9M2C5x01sssuxnjq+ozZHx2gIgCVN5p5tWonONIlxJ7Y7tSEQYEowC6nhCPUPMw3e5ZYo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-snackbar_0.19.0-canary.26d34b2e.0_1599170199586_0.21344367523842678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.a1c44494.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nchOR2Lxe0L7B5u/WJ5awbOsTpE9uKw0cCU4l7+xKCFuIBUhIG3lREFu3asBY4zzoI8VbaizmUrsACXewuTOKA==","shasum":"4dfd469d42f21ada33e538773f8b09b89ec0a0b6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.a1c44494.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIaCRA9TVsSAnZWagAAqDsQAJ1yYYvWKqva0A21nwLj\nhQ9hpgA/MVnl0m0zTHQtxpoclcpOqYeUmqObe8aM6xd04may3PSs6OmU8der\non1Li9D2WpevW6/EfMNJ8eFJ3wURqRuI6XVZ8JkdE6nNnHYADYoy1xFNIoSz\nwbiCo5TfVw5VAOYnBNriwJ9DBl7HPkV5dulFtooHl6ZDBwd+aYXDxxy2f/G4\nx+sYSGN+PNxsjaxz1D/cmrUgrewGlUzXxo6PnDheEx5UpW+kez5DiveynRvM\neXliMjys4BxXPhY9uQOnzKdF5Lop8lsgrNC16yTKw5iIcNqQiB0/CCp5xxiB\nW4nobuSo/iewz+V9mk16hu5akGFBFr6yLxKzh5R3qcHm1T3bJKTG5Ul0y1C2\nsQj+w0wcM6h352fCVp7azpGdulHNwUjK+H8HRmLRyNfeGhaMytlxy+xe/v8o\nGBvX9p8BBK6dXtEhoOr2ScO6TKZbVtH3inQWrFh2ZIzSUYjaJvD1rOSC1pOJ\nt1n4D1z+HNK+5WhKT1tiC5JmJU/qi+sJnI/U0b5RzkAROaw9Wu3ERfmbhtkY\nRbECbe5G52XkZqcBRvvXYbzby/YuLvVxLsnSbvASlbLWtJXZURmRd8ph4kSN\nbq2B5CN45jgUNgR3557bcED0l43P7cj3ySH9kzFOE19UtM/DjT5adVAWvLGs\n7BTn\r\n=F3v9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9CcJh7TXWQwwOZJVsuOUG8KK97YpWt4zwMhXgdzryuAiEA6Sr3KPcGaKgeFuDk2iCdO2Ndxyb3QAzN9tTB1VjDK5I="}]},"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-snackbar_0.19.0-canary.a1c44494.0_1599689241471_0.6113799915739755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ka+0DG7VZdmY86HjA3Iyvdzk1Wnq2/yOobO8rFYry/mSB63aj4kIFzkm0nXFMXM91jRfZXwAqz+1OVPaNQWn1Q==","shasum":"507abe64cb520d76b848fba94bd106ee01e53c98","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.be1cd1e9.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcNCRA9TVsSAnZWagAAmU8P/Aj183Cx3rfjP3+NaTj5\nPhaKok/bGj/TT2eo6Muybez8m6phVzrXglcgmwU57PZzCiRtZj2ES3wIYhuL\n2aD69ptZLFdCQGUUYnmUsT1w/Cs/QULDT5oblTlaHY/Rnon1dDofmDL+oohc\n99vvrtJZyYQbhVlSXmSbwkKMr5orhECp5XAeMHtE6Fs1NI9lDQiMM6OUp/je\nJedL7qKIAB+ENlrtf+3NjSEslgpwv181A+6rs6NejevMHGWrFjl7xTFfs2kq\nzErV0JqyxmmcA3PPFDWGRE3uweHbG0pVYrh104Tt1zKdJ2XAFC0tO3mH4AbR\nq2ID+7W+Z4iPP7nnHi/29w7b+lj1oUa48/WGcDfw8eW1WwiH7k7qYXVBD4K7\nAjvLS3I2DbWMQc3JaNBoymm7cYJd+P4mIKFqu56h+RbzLWalnaSCCG3wVH+Q\neadDUaAIIzkcmaa8cMXcrl8Eg4yUyLonFm+T2yz60vuq+fAa32mFhzj0oPoI\nBjQCD4IQwHrcrueDuhykhj5KLiS+h96LvDGLZkcAuEudMuqEG2pkreln8Rzq\nGjsnL77Z0mXJjZL3+/wEJAXGSvDDmk2dHnyFyZtrHrxwMiv6aGSbn9gEjezw\ngQ0nDJNqD4gAMqiXqpJ2u7iTvbkgRv4AMwYZlEpSrgOUAQVYgSF35f1Fgcqf\ncz15\r\n=z9OA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9xZzKn2pquiYWqpyGKSDwCD5ml7qcBdb0Lb7gbtiS8AiEA6BZ1u/ojrsPv8VIw8yoaJImzNrwFP0tYGWgm4+z6OdM="}]},"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-snackbar_0.19.0-canary.be1cd1e9.0_1599756045016_0.6974720318178973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.f094c0ce.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/RbU+vxgP2XtJLLFhx33VmjZeAQX/uqIHivXVW3zfgIm8Lxgiui0Z9x5usaN+L07BjDsrkkuptCLPbPJA0Xyyg==","shasum":"69efa473e7225ca04953e8bd3622416b646e0fd1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.f094c0ce.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmP/CRA9TVsSAnZWagAAOEcP/jm357D1fY10VKxf/BaM\nCJpDyL5A8FJFdN0NhMxkr3e3T2xQEhehZh/QA3no6OcjZlcVMJhBEZQIir99\nyIsrHos/+cWUNb7DAfTatNVzI+7BFtkMFXNo2m8qvThu1GfPS4+H7hCtQly7\ncGq5Y6Trx45tw2FtFB/fUSBHWZRzgfoDMvfPy7/x7k3eEGd0L1hIj2tz14FP\nla3rRVxEQoqV3El21FNmJumLrBfCgo2M9SBYzAwLaBXyjaP+JseF81DNeLXh\nnBG4KfClHdXJ8Avs7cfgoqqlvtNpnC+tmpIox4dqDxMV5+Jo1gwNvzerI+oa\nj6+3MHGXng3tixbFdxNsBIZ5kpzkzpBF7NSlue2EvUhs2Zewi1ZTfxh4mRkr\nFVEIn/NPBgus2sPd0huHdKzst1l6HlrA+iIQEY5CyGeaypF6CaJ8rDxKsotE\n6JtNxZRqqFUstnN0zqQ8fdvUlA1ybS8vs1Pq4bY2Gp5dXJT9rKs1Fo0+O/KY\nPK/zrTQP+swlnJMn+M3FNp3w7+btHz2r/kkZuoKRj7+HL0X4CjD4e272L7S/\nYjUQDyStUaQGqpbn6KM1AezZ3cyaGOiZhw41pNbvA9xFlQnhDmybjG4efMel\nHZRlsAlrR4kPX9Ck2xfknn/TsPE5lfd0v5a7WqdRgamqFlyN0uFStxQyav0l\nxH4p\r\n=Rv7F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiRnsl68z68V82nZqHLJTeoQsW4Z+iZ10NqpQJrww8kgIhAPMh+v/Udc1svZsaluFPTzGSXWpuxqtkLCMqcUxyYhqV"}]},"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-snackbar_0.19.0-canary.f094c0ce.0_1599759359064_0.1447758222488036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.c1261e7d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Y1Dp4NfpMK508XFOCe+8BVI5bj3rmZ5ylNYy49shdQJjvDzPM1qw/Wp/SdyCzRW0joApxdn2Tu0cEsOq+cYN2w==","shasum":"d3d766615fe2fc3f2fbac411b404c174206b896e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.c1261e7d.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuA7CRA9TVsSAnZWagAA/4IQAIqPba/04zQzeDiu9qzI\n3kW/rkFD8/6g5vhqWGgjsaTYWpUZlwLX+Vf2y0PZTzzT5wCUZ3dpX6GVhfa5\nRbs63cXk0ernQDDjdEPkvrTfiuEWhZdL8b+DsSMSJ5DyG4UJHMKaKziDV2V9\nFrTDY1NaCLtEpNqBQg4g/TYAyLAF/jXsZVZAsmLUkz01W3nVTj19etfPkR1N\nPi7VRMIkA55H9AtuPy/mZMw0I1W63vKp8OqDpPpYhiA7XkmT7KMoO/0tJcMl\nIpbwRdqbfeyoAGfcsrMiyons9vFZrTGh82Hx270xXZLCq1qkLMi1XQbiOpvU\nJcgxKicpYxuH1A3jailA1RbShfo8W+3xu5e0hb0Nzuy1F81h5IwQfdcXA1yW\n2Svf0zR3YLHFMLpU5iaMY5GeZeEQ0ZfYWVAmJ9TegPWXXhHT/mP3EE8LlxXb\nJou/aA0IMh8sCt+ASAC0bZB1t9q8IekbMydF11K/S23Dj5fxUyC6VPDYnBws\n4880QWtdY1vVHNIFV4DcNMVbakU+iWSv1SC9055OCyXVt7cnmg5Q0cLt16q8\n5+asOGPWOR4AuRLz0WW21NsnwF6J8wonlpgsoiRLcJWd1iRUpn4x/CQ/+8TL\nV129/FAg0Z8G6FyJ7VnXrBlyhRrVb/YSKkyaHM8AOXaOpppQdEejsoA7Kzqb\nfcJM\r\n=xb1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8Q+R6h76cefBmarL5Ixr+7+iI6mYiukQd6jVC/6jhCAiEApozR5PdkuGx44/EI8AwRd2mbQQXpkvUFJGhx3K8DOG4="}]},"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-snackbar_0.19.0-canary.c1261e7d.0_1599791162580_0.05098210530286518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pb0fcyGQ6wtzDi3GL6UQOiF6zb74jmczu9TPqBtZAEne6Bx4krjDj269y5eiCp/GmbZThOLv16QAAl8LgLGA7Q==","shasum":"a56345dfaa1ae89ba2b247f4651c0dd7d4c62b8e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9b39ed1e.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBzCRA9TVsSAnZWagAAyWcP/3p9TKqJSHtbzwV8c4CZ\nKHfyLlWcXcVNKUS8SJPvgM00zvdzq4e5EugfMR5dkXAs7iVXlFwf++ulr0fD\nm5AKKZ4iqi07zco4GKh2Tbne34lVf8m80r13sycswR8adxzTZ+XDkFNryOdc\nU1PzUM0phfeke7GGZZREIMQSJHt8WxpvF9pW62gUYzY2Q8FEh0FlzaGjIUUa\nJBe0zneJS1I/MsSLR1r+5Lm1iVHr6dSbcdu0eWTy+sOHAqJDyzJsjbRVNZ/e\ntFDwkVwC/DWvPbAlZkA6LFZG8RY+CgGsXeJcuEmLg4YLgZjxmDGTQXPRUbpy\neFFKIzUjuRL5+ZS1ZdLoqT9GkqcTI8BVP+BvZIhnr9IS39XueXEokAFU6YM/\nXsnzAJfSPcQzi4uiwXpJWJ5Tyyhx7EtKkkvnzA2rb5K6lHa5AzPYVrgLao4a\nL5Plc+y3mjI3MKR596/az/oBV5+xYyRBT0JEjrLIlaUtoFJZBW8LFovJdcYx\npfGdI/kDAPEOH7kMW28KY1J4i3X2NIBdggciOyTU+lJSobVKgjm3sr+L2D+x\n3A9CZHvmZzKbBU5B6SHHaLvtVbcvrBicHHiaHhoyVzBe6oCzB6EeOWDmkqGA\nci1ufYVb0a8NTlr5XITUa0IzJb3VTTgKWo7i0b2wD0ngj/AFl1o3q/L356iI\nPkVU\r\n=7h0p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXk62ymzwbdJ7qCIHyEk/BqDLlIVpaY/sp+USjJQl8fAIgYqVUQGoLZL0BYUNJZhS9+HzmjXCMKDaQnX8CzRSjnWU="}]},"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-snackbar_0.19.0-canary.9b39ed1e.0_1599791218841_0.9452119838811675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.e67214b3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Vwaazb9OqwD+dUGQJM6TSsGAGsQgzh/tRa3JSmHWtL4zlu6FEqAVguFrwf3DkuoMzyWIsF2RxsmRH1lgID7lBw==","shasum":"a47ace336f036fd9f1a7bd75ff3a714fd502c3ba","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.e67214b3.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuF1CRA9TVsSAnZWagAAvf8P/0Ov+D05rBSGb3/AXAH1\ngX9yCAj2pU6am5XEgoDX8l1omnW1+ftiELqzQceUl0YynSgsmLsP5A6eemV4\nQdJpaXEK8wdDCJXYJAGZ9R1j6FOq7yYiyVdG+aFbUFPBMMdqbPzYxnx8vDHe\nHxKkI5p3Tw42CJ9Gr0GeKra/L17NK5NkDjrCfuhuYtLPwruapSskANeM7cmw\n7Dc1BK6Cqy+vu1rbCaAOfABfLBJQgSUZ8Ro9EhDss+3NjaOguMWtbRbAMlQb\nDw397w3fYmfgsrSCz4r0FWSklDObVWsWrSFVc1juxzVUMsBF0i9jAhGKlZD/\njQRMyQ3yasKZr/Pn92ysbWaQj07DE43lfDeyhIxYIalGBKjzcfYJpLRcjYTi\nQfFKRp6SN8DQgE13yje+iHH2M4XpohIRwPzmdnGeFPV65j2GtlzjCCHHvKTa\nRm6f+VCj+GZhMAACL7JQfIhmY48CvvRI8FnvMaM1RjYnuwVG3j+LayyXVZSY\n0pVz9KHmTh6ZB6QiGxyV4CpMr1F2z/KXLxWahBQvkMo/ioCN3tGYhj+OGYcf\n3/qfZ06eUanit7RSu4RNrvFgk/DdOC2zCwFpSxYYfls4DcvXLPklKiuOKUMT\n0DHOfvwiEDli6frKS7ouGKdc7bAbMe7rF9fTzyhciVaz88RMjn/ehajhXfGW\nHEbT\r\n=Rtb2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6RXLIrR5PG8GL8qnABxPKUeSQkp00YeALRqOpifuUrAiBwOZh3K4/QBWXpKccwhMiw6avYRhE5VwLanMuE8MsFKg=="}]},"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-snackbar_0.19.0-canary.e67214b3.0_1599791477395_0.7497253845268146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.36f5da28.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bPQ4O60MX5WmyrqlAb5Sg9do8Yz1ySzRTb98q0KSj+3Qbc20st5lPDr4lfPknu7dAAI4EklndEVPZvKMYzdELg==","shasum":"f7af42a2e701ad3fea1c992432c2bd8a8f29b0da","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.36f5da28.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIVCRA9TVsSAnZWagAARzkP/1hr6xKpaNB19EcVPboF\nIsWof0mTY91fIXq8kImQ0bD71gflzuL83d01eS6rID4zNFWsNo6IQtESo/vT\ns3F7fM81pzHfX9iMNkEGu0o3ekBQxEiLRbyhs03NqNlISF+y549GgrjAzI6p\n0YRequp7BHibiB2BTfB9iw5G1+FZ+ErB1fe9vqHkOdC2yHItS7PNFT1Y6Gnt\nL/022LBS6qiXG8xpERtkHgB4PCULxMqOnJjCXACE4kxWbsSzzMTxOnJhTvA6\n7cAAUq0hhl3FwZHVn5sRyMmqwFNVYlUAD5dqDew+ZCxRN0aTI2f/t6ZPP6Yg\nKHoP4LORJwqrXdVMoI2K6uA4c/GnlBuXD8jW4qhG7EkwCqjONtqWDk+daj3+\nmkMNZQQ75ZifS8/XeY8u9bgsFoQo0wL9FEU5X1bkpr+YLC1lvTstY267zDfK\nvWyFFoCFnIKtmoH/7De3s8JOk2w4pK5q3qF1wcI4A7Kzq15nXxq3vpa2EVsy\nlt2lDqRZZXaKn5p/ogAVNRENjgCuLspLY1hiR5dIrAivbV/bCmXjmWU+4JFr\nr0imrDyukNgBVWviMzTHMhmqkMqL8Fv1VRlClDIZjiKmQp+aLm1MuVa3iQpn\n0m0CyYycqByxJ/rQOGrJf0MXd9FsLE4wuxwmP5FZNGDfceChcYHdGBkN8wJy\n8w6X\r\n=LN4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxuymWr1ZXyHlPCaFpN+QDdXwzpXc9uOnVBBQRQ2sCBAIgIIBuNshdNMAgtj3QDlYOJmAWjKCsN1i31xkjx2/W8SA="}]},"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-snackbar_0.19.0-canary.36f5da28.0_1599791637196_0.8190929271601508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.3babab12.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OBr1tQYAyY3rMIa70+vZtMaedatEiXq3SjqobRClcGYowDH+gkytEkZsIfinZORE4XH5OgNfTDI/wK6iN0vhig==","shasum":"7dbc688b2c35f2fe973e4009fe812903a4e6719a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.3babab12.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLECRA9TVsSAnZWagAApc8P/0VDOLTcB/lqmpQvsu4K\nfoO8BymRCIeZoZet2f59JRwe1SiLDJYCw8Ohb5bTey+KeHUGukdPsFjvvQ1z\nzesuxpdZNp83pfBM5hWOmbYoDoRzupG4YZEjJLgfkNFaNNyCyNPEcTMrbsXt\nTSnD5D0tvl2C/tdETBzakzrELe6ugR7KW0Zhgrmu+1oxPATyV3uMtDbAPcTF\n9Qw9PLsVo9L6AsBxbS+I2TvQVkJuQqgN9GmIqbGlm7zTjj45IjIjLxV+su6z\nEwWPcNrewVxB+DFop8uSq86tjTTzCZxjSV1Vm/8B0iRRpZXB8cJZXqGwOApW\nxvERfEk8eqqFsFuAfmWwzaH0brHkw4JSKTCmj4wKCrMfQsIK2qcs0QEHGRaD\n9Kw79d6nE+6LjBOYrIm+l93TVH4axN27Qu7gOv7tjjAI0C4Vvplhm9EUrAmq\nj/nCGNAjIu/ZCZnvkBPLybbm22k5PXk5voYq6oP5k8ZFXIZE6TZQtT+ccXSd\ng+wwgg127orG1CRKIy4jqZu315gyBEu8QVwbqX3HRLiqjop1JGsuo3Yg2he6\nsg2H4fMbFX7MIVVAcmVXp5MsRWfKaWs6kK6pczfDm8V6cVqncdcKmdTecf6R\nJEHEqFsMA4kIQPfbpw3Arf1Emz8ZpZoRsrJ0ANCcN7Ptb9zqN9UZ9OX9VOYl\nAP0W\r\n=qa5d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWP2p+X+XmiVHdrAYeoBj9Xqj3OB7WdCVsNktRkFMk6QIgSBus4ui+A/96IDsjHLZ9RoGInmmaOegteO/F/cuVh5c="}]},"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-snackbar_0.19.0-canary.3babab12.0_1599791811859_0.05880891008226974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.a4481e6f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3FX/Lb7F4UnsHNgUIjqguzKBn/lwmX/gszGXJgn8VMlQhGL1XGD7abRqLRkPc19VeEmNjpnUcyVQOXtW0iIrwA==","shasum":"df00777a3ac4448b82dcbdc4285387b483a37490","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.a4481e6f.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWfCRA9TVsSAnZWagAAcjQP/RrQZJv75nK406RGrEQ2\ntxrDR3X7IytRx3F/FTZ6QVsLRiUKCrpAA3pHmFX6EevGFXO+38S6Emt7e9ou\nzKbDHKX7AKgp3JJ4OtWEg6qWSqslCklClnU1yk0UqM2KuS/3sbOSY4PI0VI3\naBkOZh52HRXqAXAVgWVE/vS3nl5hlciSjwXnirHI1TiHauI8IIBlj8DxKDvK\njVUB9nq6n1BQR1vc0GXQBGVMpQL2VdmjdPqiN+7v3XYhZSeBXQdkpp6+vVtq\n4iEKgQi3wud4cnoy7/Gvj1cwDT00gtefo8G9udtVhM25eBxyXfpc7DRhRbWR\nzEKSLmpgF/rW8ZKchIEXEC43i3Hzwa27Y5tbz4DQp6CrDz6ttRdE5Qf1v8G9\nCbtNwtPAE5oMex9J4+9CghQvo1mqSNr5OkbXiS8gNJ19TTSmy203lf1wEg7S\ni89B/UayJ/dphtFVpgT+4fb+Qgs7eJnqdHvt83mZcDihxGfd8KiPk6itIvI3\nprsFgLhjshHfvAutfyUDQjyHR+FjcgETmCOdTxkqcbXZZZXmxQ5dNWWBROQh\nuTqQh75zyMBd/3Ap8XWINZXDPU5fL9PV4NyKUaQ6sk49LMz4RNm4HmuRGcah\nxU3GDnKAQDvfkDHMgdz6PuZcZ5mZpALeMhw2P0jcjcQL/Ac7q2EAnYUOjcI9\n/mTK\r\n=s3vP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEq/0KIorTxG0s+k1LAaqeBsIvz+l6BJWp36bA6XDSPGAiBvdPOYjupqzwaSKgm37O8NCUCyAzqGgfWHYpO30ifalw=="}]},"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-snackbar_0.19.0-canary.a4481e6f.0_1599792543361_0.7759827363849725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.a9177836.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/snackbar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/zphFkyKmCr+wM/FjCE28eU6UrYsUpGHD3l/TYB58moltsazrplMMO0A8wbLkXzus00dhQPDRc/gNTrmXXKrAQ==","shasum":"01f612722cdb9944dc8dfcd63aeb306d6ab8669e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.a9177836.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7ghCRA9TVsSAnZWagAA8tYQAJWGlPjgwN/yI3MPnI3K\n9vMijTTJ55KfkIsjjhFZUyEhM1VRHxVBkcTK0yDKelPVMEGcqu2fH3z/X0NJ\ncKiI/hje6NQR/lK0n681dcehjU8YR8RixkEwevhudhzQ/pWhNVAdoR8OxOQ5\nu4H/GM8RayYypiqxS42AHWOqJXUO2ORa3Wm8+eEj8Dh6ur09U1HSumXpn2+X\nV4FnpuMGiLAAUsPOPoCpLae9ssoJlCCiGoQjbSeXaEX7OXYyQ/+JHBD4sRvL\niDhAn6G3mFe/Io6bh48f+aCw3Qj+r5EMQzFbagFMmirayn3CZZLviu9+Hk4q\n8XXnSvuxpinRMiBaRWQuB8bg1ZDzdyH/jNAPmQJDQx9fH7x0f3/l3HdSOCPJ\nqk9B8rosCSZY3Kmu5Z1gq0Xpk6VBzlNuycWiJdEOXHC6GV3rEbazb6s0m79n\nRfiX6cH7HWfAzoquZiM4/1mRw5y/SRvtTBwCkHADvoFCkTTLFKAGPurNek23\nEv3YhwmNy/hfCNQJ6f8NA/vXEOrQGYRwDRAgf4AHVMFtQsYQORi3Kf+vWSnu\nQL6GmgAYL/HKJtbwQkmpdS0QBLBbGxJNJoI55adltAYmYxohkPdrNStv6fR8\nlUYkUyh7HbE/iQK5GUZHkUiwKc/JUeV2yXIWc9ecshNZ65Qc90LXXVAfoPuk\nxg1Y\r\n=R63G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD38PfQ31I4mJGnsmZ9zwQ0YJmLtlSLvSJYj/8GkWoSMgIhAIsilqv6F3f683VowP4SQ6pTegiMnYYPEHQ5LIff2yuK"}]},"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-snackbar_0.19.0-canary.a9177836.0_1599846433203_0.9952960835894931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.b102a3c8.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/snackbar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i4p7uGYv9g6IxQAXZ8zT1LEE7uT00ZLsMw+rjQiTc/FYrSO4HwaZzTP1+kxfb5BGFNj/6NJW//aMVK6ilumF8Q==","shasum":"4c10d419e53445707151ec0db772a9c7b31d3c0e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.b102a3c8.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87QCRA9TVsSAnZWagAAHcUQAIN6n9lAIdgeRbJMqxwU\nh+Zi1KjVn4ZWj+FtYV4fguuSqh1o4MIhCxqDPrcPuiK4LYQjQQlk/n/LgEsI\n/ri2x4R3kC++8nf8pANuYrNSRZIBSoTBKsIM65oPaYDhJlpMJYEHz4RJmSZ2\nuTQAUVzWoY8luL5tL84fUfgY6RF+hMJ2ObELcs/a1bvv92f8XKKANWhX8mtR\nhzVsSnTqk0TSp79sqRu/ed/qVdiWF70wrbojnLw3hVKXJVy2RpiggwpQtil/\n9BB4RbWDh0VlChlhRPq0jG0vfZSIJXFjfNLw/bo+w67yWfoXw4wdXwZDKoyO\nYonBq9bWhKbyIGnr7Z+3LoEAUYJS0+4HlD5KNMLp3+TmB1R12j0pX5Cv4vXw\nYEq5RKrNap0mnA/Pq7H2uap84CaWUF1uUokIDyuM+/ROnpg/aebmFPWdADjh\n8QBcnh3W8ir+SevZRACAg4GnkYfQmELSgQWzq1sQIbOwwojs90tvI7lqz9aw\nNdSMMlPhNznJ9YnIxblN+AXd6Pfog+kVvbYylepGL2ztbmlyg+trhXrErUF7\nHwoFDuEAye4cC2+85XcqwENwiBDQ+SXziVPRM1rE/rHCB+tgUmLVq1R75IlR\nT/b0sfwNRiTs4VfjxCZpvqJcGH0POBQ5UphYC5+gYqgLwfoBFcsMYU7aSn7A\nGTIw\r\n=xB8o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNZ/WAYeq3NkqijkXY4GBbgPxiK4pL5Ru97Ex2FnZFcgIgOJaVNJacN0G5lsdidULpf3eLovUKWwVMyhK8B6xlxSU="}]},"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-snackbar_0.19.0-canary.b102a3c8.0_1600114383867_0.667319405970155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.a7fbc707.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/snackbar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-i9wAjhdwi3rIJnb6DhnN2PXM/tnZfEun3Pz91HQn1Jy5vzG9F5JBkugLTLetlwi6B2/sPAl9quZNArN2hkhciQ==","shasum":"a79c60269878118e1d25b52231b72eb93562ea41","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.a7fbc707.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOY9CRA9TVsSAnZWagAA33wP/joZIYYaXwLta0pxKJ8r\nd3we9xt5E6l2p0bxeczk/eHFlcqOa6xz+SyhIE+XmaY03uLOrDviXsWK5jxb\npKKo8NoNevs7GaiGt9lTovkMNV5O4qFE9cl/8Q5SHx3dnaGERaOm/rg1N4La\nbtK3fUIt8syT9GEUhdoDPLG3e8p9byJJ4yky3MfeDBJUDEHjcHusP4Qkyq9t\nfz8C7MN7nD5kaaXU+Kj2sEBxvghjxDdIDyoakWFM31PWItytQJ8ZvDLF7Cgq\ngV+20M00XQWTJPTRprIKQdpPIzz1pzueOpm5GXOpEmq5IK4ptz2vsHVTx+i0\nqwXfBQ7MmVisMY4l6oGBOcE3U9DCHtfh9DCRb5jD8jRkTxOichN/WqpL86JG\nRBTIYu0L3gMfL8c2DRLcuu7Mcdqnh56kDRJLhVPmTS5GlpLmSmme+kBXlQoD\nv8qys8ACpF8bbdU80NzoWbEiGwrfGVcdpTadiB+arAuZJWa4JJ90pH0MPwTv\ns9vyxQKvH2GzenDVIECDZOKvTiJAS85BVio7zuvuER+fcK8A76VE6q72pf4B\nCtHWuGy6X7wEDwLre5CSM/Earp1ozs6mgnWk94zqaEc6oGyBP7LD9UjA2UvO\nbzvoVAJ1grQgtMkvTpR2e6f7EdS5EEjfQxaQCpK7tv5nGJeU4UzrXVdWbtBV\np3k6\r\n=r0Q+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOJM1M7C2G7vdWG9gyZkkScyLvVRVaBIteFYTKEFM6HAiEA889gjBjDQQR62dlhfIed1vDH3eavhLvAip+A4BBLQXU="}]},"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-snackbar_0.19.0-canary.a7fbc707.0_1600185917005_0.04199558567447781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.ed6b8660.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/snackbar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+lrTt30rbfJ7SGJlmB2Izt7/SGGhuum6mP+pH4ZH9gk/cr7VH1YWEtPqHrQyDl3BjrRI/IGas/HOlPHY8eu38w==","shasum":"0213042d8b26a8f1d7c192ce400777c6590e7161","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.ed6b8660.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjTCRA9TVsSAnZWagAApIEQAKJ134zX2yv+EjjZMRh1\nKeE/cKUEIN8AyNDyuR23Gu8I+NJKfBCZxlYhF5XlTS0d4/ct9eR4m8l46ri1\nV57NeD7Q1flttjnwmeMf9eVLIzlipa/UpV2Lih27WjfgGS9wCA8/HTRQuKEu\n0lg7DFmqBO7xrmQu3CPLrL/CeWmBjBoJ2aIXSEiznQsDjBRV5arVmXf8sNtV\nmYlh7Iixy9uSaETaEGWQBiC1gfmtq+iHAznRw5bJL7A920+JlOwGIJAHQNhm\nvB1Blwr2fkP8Axuns20QdxVMVofxQxXzNnjtNdH0I3eeE+kh8KR+6UgMTsMK\n5dkW2miSXobD3Zsa+RrhNlojtNnwwWR4b7gH+LSRV82oT0Prf8RyesiEwAkc\nmoF+c9HzePsgsTYMsEntWJJRyG4W4yGPv1cZISJZYWJCjTytMLP4ET0oKKAE\nwKFeQCWE4I8TVqkjAFjN+zjTSZpKxwUDIOHhpZZWf89+G8qSaobGpfNUj3Jp\n3MIEmZjDbxH5DOvS8vdEunG5Ef4z3wzUet666B4dK6i8EWu+aL5ieU7NrVmO\nRjEjoc3Izbc7Q59QqpZ1MHZk5HUJLsCEbka1xwvZgAZouFEpb+qm5eMYpxb4\noHkgFLE+OH+93G0raF8+4aiQNxWeDRgmIdQWTdJQSjNY4WaqdvsEylj75TfO\n8i4x\r\n=6zkZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2VP1m96DNdLwiaGt0DytFDJJGJFGsTZ7iQV8UWr4FSgIgDQcvGzoEuBrSiRyIr8YgOoVMAGxddDjkC1bx7iqK6dY="}]},"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-snackbar_0.19.0-canary.ed6b8660.0_1600190674491_0.8451730540875768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9c2331f5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/snackbar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.319bf66de.0","@material/rtl":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ornEiO8OOE1Yp2thswBGIK0WjXvB4TK5bFvKITH7BhUrjjKteKBWh1UuciU+zZ/1g3B8M9fRImVam8CocQBreA==","shasum":"a6d26ac132ae61dd27a66621dbf9058f261ce275","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9c2331f5.0.tgz","fileCount":16,"unpackedSize":65695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6NCRA9TVsSAnZWagAAm4wP/3iT3En4rNveD2qO2Pau\nk2Sx0qaCR8IPYu9+spA0zyPm+vFhuxccb4loUd3fllnUMJFKLfONhOxYVvdT\nejaFnupAZanaF6JVSAQ9LlGRWhc/yiemHYpzR4733OsXUrkRkUYP1ivbiTvJ\ngRqhU02lBmgoLsP0RaJ67L/a9mwIF5jaRo9+BWI18ZanKIuqUIi+eOYfoJCR\nczSoiCIwdyTWzPiLxhAIDCs7OFAjORKX3vSmgRpGkQ8GYNEzdcPczsnvAdMs\n6zNGKEW34P1xTnNJ0QlKoIinmybhSkKB4eHu/fIyMSf+CO5ASDFhw/LEgVWC\nVbB1u+3/veNtLQdghjL1nB25fjklC6xVxyGXB5dJjxOr1HglNV07yVzOUs58\nqnFe3tv7TcIgfvYhJC5mtMmmB5x6hn2NG9aJGlhUs6UWwAS6Vt1A/nVvLrpR\n1jvQdRLN0dnm/d1mES5KfOsDVNarunWVfZ+zmxJBlnYKvFEXP2skzNu+GQZ2\ntnwAzn2MQKx7UuKhzRMfQ34u0Lj1jRG3sgyfAAZm0uqFV1/QoPzBF/P2avCO\nhvx5ow+LAHmW0IpZtTrEVAR6xTVEn/ohRgfUxGOt3rGLP/YGtXZP+tGchU+6\nLaaheJGVbM7mmLr+D9BY+y2ZpWJc4xPDbTXP1mvfJ0PE8hLGhp+kUwIWF64w\nkGE+\r\n=sAtk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs65NET/FZydY1aL+obSgmyv/Q2B3QQ1PMl30SPotgZwIhAKiftw/lpRAlksHwkBdRY3iw1Amy+xYQ8GRDPI9ggWOD"}]},"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-snackbar_0.19.0-canary.9c2331f5.0_1600192141441_0.9140485613444715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.63a5f088.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/snackbar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FEeCuxr/w9ooBhEJGt4MCjQysppMhh+0WG4m9qvUqPOFoxgvBocGRrrBqiE9EIPGnBKwzgvAltSFD8FpSeoVGw==","shasum":"a3967b361e5cff63453a63aabf4ffd5fc5ffb0fb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.63a5f088.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWgCRA9TVsSAnZWagAAhEsQAKIbowcUN6geIuaZqq+e\nicCFQa1SwL6h01keqgTRAwK1/I8i+NzvQDJuABMeSYcuPMtBIsf8TnIrTACR\nBCVK3diWv8CQLrek+9Y3GOrxEykhe/OZExewG/fV5hEE1/Hupei8ZCIcXVhi\nU4dfPgW564IebuK+/Js6CDtG+MVYV4QAfoFW5uDIbV2wJ+214+bpuQMt1VlM\n5Uz2RkX+kgVi6TKXmL3IP9C+FSS3Kjex1vGsrqQetgO08bRr67JL+U271uQp\ncQWaLlDtdzxGEnGDegkojHctXNyS6kz4DHHPv57J80lXPoP+ILyc6mkUYn6F\n0AbtWfw7Vj6inyusNF6Z1+IAxhoB9bHXFnZywBQ4YnpNX+D4+rOh705SvyXV\nlEZjOt4oij4prkixA7lbwF7uA1m1QGrw3QJ8n7HAYieh68U2oytJcVG+LDfp\n5959niNpl+hOu5zL1PBrULWLTkc7m9SaQyQPe27sH2YO7d+EePGVGIHIMttO\ncymsmDP2+JgBABVGimi2iehPb9lDIofNZlsZolJrOgzMMGVnMMqQ7xOIefsq\nXYJlVplmlm/fVk2iLg84gWBoquuPJ+tlNAKuuQUPFKeVaKBFM3RN3O5q4RRy\niYzIn8bw0kFk2sJcYV0yGrn20qAYdnX+ipZ+WnwCu4qGI5shyzcxZOWCbvYW\nl8fM\r\n=V5hm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwc9YFs6BPGhZzSt3lSSGgNRUsGW4sL0kje1aPT8y23AiEA1cl5+UwKUWafXJG6wOnbODZTCsrLHIIGt5P4kuPWCZI="}]},"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-snackbar_0.19.0-canary.63a5f088.0_1600292255862_0.7911658125351237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.b7995e49.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/snackbar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Q/cyLmge9rCoX43bGMhq+MycFjty3dUD4Etuhfnbhn6FD0C7oSCrXxdJdYvwo/f6+mbygcAfJYGatxGLxz4vCQ==","shasum":"cf19759544894097bf85ef3cf93ed6ef5eda71d9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.b7995e49.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8aCRA9TVsSAnZWagAADUoP/iJF3QuRs7rGh+1r+sBF\nEpVxfJDzPb2MhHMhDrePUigKfGafJucLSKIq3kJpA63cbRFOpRwcoZXzcOdQ\nqH8Tl12CMBbyRiqVO2durVydyGu32OV3maEWSnNMcq0adGAxN/LYjJHSi47g\nGF5NfoIkO3xzMh2nu1jiOjHXiBsabXwcTWvHUjreWG+1RtJRC7y8HvRWQ5RO\nA8VysC5uW4J9kthwU9BJDJoDLqvYZ4tpRnzCRUN2D0oRpcmUPj5OzvlWkGuL\n27NnSSveqn/mitXTv5AEwFGWkBG+JS1xn9+n6xI6W68pnwjAUdsfD0Hkd6p6\nxOg2P+RjmipfO6v7yvuawKEezbsksC+GpZZJhKLCcmxp4usQm+JqOlsp4+is\n8FxrQvE9uSRzcW8ybMvTY/zZindjuhBXBsmz2bsWvQr2TWf2Nm1hTf6PEhhg\n+CdPtxlSK3/f3MW6LyJApk3OpMH8zwCHc2aS4OjukndA8f7owAZMikNWKcAe\nwqrLtMlY9TEEicEYpjDl186rnWTR53p4RaJBYhfF6Auwwg7EhqnbfS0YYqBJ\nTYn5yWE11KXOCrKX2bvmChxybIA4inqU5Gg+fGYXhQajF+RWQ96FbPG5/Tat\njNZIBK67xAPd5o9o9yWcBAeOd51aaT6+rRJh5DnNM/5pL39EKDHj41OL3lED\nOg+o\r\n=csF3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDApa1WhZG3C2HcSziXnJYw2nK21TGHmENo1lhExVQvPAiEAojt1BN0LPuaziUQMhKXe5K896kVaExXHpI8YzsEm1Yc="}]},"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-snackbar_0.19.0-canary.b7995e49.0_1600298777723_0.31056151621782835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.0da3ec97.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/snackbar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a831d4799.0","@material/rtl":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vMmIvhaZIOIVDo8yuCId4gPCeuzAxRMZ2S/+43MSdSawEXVQNVjHlX7+IKXkqQswdcCMoXOK/1l4+4hIuUluYQ==","shasum":"b6943dbb3a68580cfa235e06f8b24cbcc4ff69b2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.0da3ec97.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRVCRA9TVsSAnZWagAAkk4P/jdLfi03owoJ7xkmpT9k\n2Bw5wAyAqtkw0r0GubvB288WGYhvvDs2F/tyaxq47gU4ogFlKSQm2QPqfMrH\n3+cNPCFFrUbsMIcLB44kXWtyxNHzrHlGvmInkmHkW5G7Yh2eZ0SSGC7ZQPGD\nCTXArbQZsZCUhVjmDbL1g0/vDmZsvzTmjs7pvgNtYRT77K2dklge98bZThCa\nOV6v3LrPQiK3IHSSILGGjw+XjExI3rKciqdH8p0MJdGqR1bBpS7GM43zAP6C\n3VLK9lTkbuBHVvswXlA8O3L5zNA3606MNhN/NmORdWBgjuIJxY0DZhMgy7TO\ngQhblL/mLz47StMM+4uuU+20/MC0YjkfkX73K8elGH7lk9mKZywAgDry3mU9\nc0PlpSMuSa3VAnCpGWd/tPxzCxG2GduJyyPzsRTst4dTpN813zT9iHWIL9mC\n2Md4WjqHE3XIF+1GmBrOSYvxK/Vu0loC0xiLq5k7Ld/v1/6AzIq0sPZjKsP+\n/K4/il5XMz2osMpMlwf5/9E0bJfzreurF5NcDj3CHVXzITcNcjBdo26jFWVm\nIaW8A1LdvhailFtyU59qfvZwKr81mWjnq7V9H7UoYiYS2MjhgKTWQ5/fkWle\nK5rZkAQXeZFXbod0+RO3IGIXUv54VRzs+9dm7Ho1TDXdlckGN5I4djPa7Gpx\nJMNA\r\n=4gfF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0xu+JmhRJFT7v5w60lQbmud1v4CTSu5P5o0bLs+HcMAiEA/Lu6Ye7ndXuZ3K5aLGCRIE4cEOojmkbxqc1ckaiI1Xg="}]},"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-snackbar_0.19.0-canary.0da3ec97.0_1600726100863_0.39326290954288035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.a0793c96.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/snackbar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Cv5COiveDEF9TUBuelWSDdw2jO2zOqi2Y1fdiRy8UgNG+fWbdNRCoWulEwcajaFZnmv3fP2SHTOWeyPr5flM8Q==","shasum":"f436634ee390b399a6f96d350a2dcdb7e38d316a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.a0793c96.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6MCRA9TVsSAnZWagAAUL8P/0Igbe7ahmRjJrjRxgi6\nMRePVGAdMnEQTlPrxYLSiWCuT17IyFuKCFCaL+fH1y1WnYfX82zn1BUBivub\nzkWTWgq3ZSLUIfAO2aPt4Kx2saEhbi+0D4ZkKKLxIbemEujYVKNF5kgnD/0b\nY86I2Zzasv4GCfYmKoJ1DxYggT8tkMvBRaE+zZcuomwEWTmc/xHnSyv2Cjec\nzgYvUIMCjTOUZcTZSRP6czTe0nFg2Mltk60RLYXI+FjdY8bClu6SVO9h+yRM\n6jutIuWG5BAMc7IFzGvOYSf7CImK1GdH9vEqF/bxh7gM4845jQ3SQFOFBZew\nOtVBrRBMyPNjhLWCHn4+NNmszJ02hzMwI9amcAHd2OZDDMTwuA8DHFwLlfQt\n56Kay6qcqlzVoQ6ppQYUr7ZkAXsKUsa+Ct1cvDDMc+m1Lk+Di8RfRCbjs8Eo\nOzSciO+t9TNucotygceyOjX95jhrCKPZF0zoH+nvbtiYx9Cy8gCwa+cmZCrt\nYDeVIIfuKiqKbDB81S3eeyvMDYEVQmU1gExJzZQKH2ey9As9Akwkbh9DSLig\n7+qzlqySxjZhT3eZ6eYus5sjGEX1eRzJ5kEz1cJqGoLHyPUowT5SyoJovFnK\nlddqBSjj4pJcOWwqTI97FNpPumm9MPb/5vplm9UfukIh0TGRfZKtrf3Cycn/\nTiqS\r\n=MQUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUC8ejsY1AU/6YNYv6RIABl1DuzZ7kjpM9fC2CPx+3LAIgExDbU0T0fXlT8OqcjgkqOywpMJ3VRoOrEZ42leL+RsM="}]},"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-snackbar_0.19.0-canary.a0793c96.0_1600794251923_0.3153669381335784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.06998a3e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/snackbar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-LSkzGLSSWQ/GHVbjd82Jzq8KfcIc0sKGH89QQ8B+W2P/Nwy/nS5/2slWwIek0dnoFB4fo+vrJITc3WHOCTSW8Q==","shasum":"ffb0be884fb1e64d006ed6da23c0d872b9999e9d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.06998a3e.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGYCRA9TVsSAnZWagAAlb0QAJoF9b9rLmRglQwpg17m\nWxIve8aH3bkQSTdbcnYGlsa42JFb4aSRYSJcFtT5Z+uNJV5oUoROMVh8yWm7\nUcVsabbvU4+Ol8jrWxqNdj1eFH7oxI6lKrKUl92D5Z+Le9qItprybRT38Ebx\ntV3KVJBfmYA/lxizmg6Ix5vFHiZL5GIwOLHhBIHqmoLFswcxwixU1SDipU37\ne8ynGtCpVUpdUMU5yAD/GmzuIKK8GY2KxY6VN8EYdXIFKlalwNCLUOgFvynn\nNhmw46SayBZieg+75OkYtw+khYbzj3yzi7ZyOIPdhbNrIfNC1pHUT8xyG8mF\nFA71KgmB+tdPjOdtosivPlMRnODC6lPv+xFbKqUOwzaKzou5tFxtw5rxSWED\nXSejCGKQ7iAudar5LT+UzJa5fWf+IIUXur6f5PPhWfPJiumWN8AgXaziNL9v\nTzH9OwmzETJutT8OTzqjhFPORIisdtDYBCuC+f9Z5ZLHQ9pLZ+qBCBy6kPt7\n0gd1LPIrtxb4IDwaVF8e55Zh/Mg9qwTh/VMBI8sSxuLNO78OfBQcYg96UIIi\n6b5JKQiJo5ham9TXXQ5cqTzmZVQWtJ4LC86QyvGzery/N5R7bs6y4McfNjuq\nHhkh3LFYI8tzkwDG1tzU8PfFd8UP0/+Oh/Jdxw0hLB61FPDjtqNvTvxgzK5B\nRvBq\r\n=8tgu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYsiW+lSG0XBpg5BTC9fFhPSMJbqZHcWgw2ctkoZB9uAIgBZKPFH1WBjVWcT3DwIftvakpvyNpOS3Aps4AqstKv2k="}]},"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-snackbar_0.19.0-canary.06998a3e.0_1600799128044_0.7913359213006039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.3484a90d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/snackbar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FndvxxYhPMYzh+TrNwM8QqL3sw2HzouNNylUBWga6u1f9obr+uhsMgIbv8eLVU/n7DCucZBK0ubPdORjNxfpSA==","shasum":"edd7dc3131395543a5fc1341bfed3c91319736e1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.3484a90d.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTKCRA9TVsSAnZWagAA8hMP/iEnM6/nycGZzg5xEXhU\nFmoxdhLC5UizI19FvozBKrpJtiI451DSWLYW411eeNNtzA5g3fB0UwIVwKU2\ntBJlhh7TQ8s1fXUu9crcm0m7P8ocVLQeFnxX9FaJyS9437j+7v8YKedDo5SK\nZLUDykf9/QsyRyq1QPD4T76Vly/LuQUNOAafUZaYMDzyFidnFnR+niT8BEed\nOSb11mC1SN11UlQgwnJ/kJv6M+0BNmP7r8Yc/JFSDcpR/KB2EktK5raU9ejG\nCr8nYDO1lYjG0HhcFESMiMT9O5iq4EnWs2A0XuWg8VhZOkIg7wEhC/kozkBV\nFOK5esBYzaNo7bRAaA7wogABjxU9tvmdV0hEvHhZuqx1+853Tj5060OLl3DH\nRMp8+vTGOaRyle7lQw2tMIBtk7YyYmpw4XXiX/bcPjxKvSt0b4OdIbmMwua1\ncxYunfyI1pbxeCNQLZHJP+EPIrJXdC2i0ckYVOPCNS0WWGgbqHVL22WQ2RcC\npLwdPvYLyXUS5yYTZXy1hcEHWf1QuBE27hXd7qHDczxxEM656uGvg68WdE4d\nA9vd7dwtqFnsoXitRx+7wGQkgSiUCnArvlUzVeDTHrKtwT4wAAhiJTCz0+lo\nsuXI6ugl7bKplbh5UI39liGkmvNXPC/jglOoj5hL6uXu96No6A0bgx+DAfbJ\nH8iX\r\n=vtGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLK+O24eRo1JJpE3NMYH/LRpj7reJhEbNp8tlMNqFakAiAUZCsLTovccB2SiH2ePWzvPNbZ3oLOIHK/aDxvsJ1T2A=="}]},"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-snackbar_0.19.0-canary.3484a90d.0_1600812233564_0.8702593235730287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.3f99af40.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/snackbar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-WPJPI6GqEn3XB1DJsgzmijAadH5Gr9NJjyUFKYGbNxXNtnVn7ouSlaxI+Q6CJXE3xJOdNS0zo4nqkP6CVIezzg==","shasum":"3c747562b7fbf0014e2d5794a6fa5022e517e42f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.3f99af40.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSniCRA9TVsSAnZWagAAiVwP/jmpbS5IETsQXQJC2GAp\nu1kO8/ZcdQeKsVv8zdjYQ2GJnpGedqxbVjfjGY6wo450yB9lOZb2Mqw+z4H/\n6BX6AGtqk+bSIDdfjazle3+C/1y5BWSP37pTN/CIPk6qL2KaK1W97+wtg405\n6REhWO4GPKbHBI2Yw4gLLyuQwzw2hP3ZKu/WGgyVEkONPMyjZYJuAslHm9/t\nnUQIzwjq3BhFDUG20e1Lg4KA4oUvPR71Z/8VB5RMRmEdiu/kq/trKAAmSy0d\nv+QDZcHced402yYdK3et14GN9MjJrTNY7ddFPziTyCj8ozEXqFkMgQcwjFGI\nKZjoHEr1a2AmgDsJamaNdh2Eczd1aozSkIkhURC0CSE3TJk9NrIAkd4ay8ii\nL4X+UgT6CZlowQNBSf0sfgsz3H/IqfF1rUoCOuizsg8rRH1/a5Bix5DUPJoG\na8fWmYIkRyshK2dNu3jeVqj4NZyEnanaQozZJSlF52Zt8i04gIqZY3XCMOrJ\nAbcW+gBAMKTSBdC1aBFLfhQHFO0t6sDqzNPYMo8iSgOYE8vDVy/fkrULUxzs\nlEtdE92fLtSj+Tcn0nyqwwIdZabFjmc9GePVWewN96Xuz+BPe7Irq0v36Yge\n7m9fL66VRQva5X0j2dHqNnwEN6duDMHeAbegJ1PdyfispJ8De4vkM8V9415s\nEm6u\r\n=Emmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKn8ocO5lVXe91c37OVaH0pJvgaA1rFmXeUy9w3j8fnAiALhwIY/gSGJB9B/KXM5T5gXH3xnrROAvTSwlo2Ihx1CA=="}]},"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-snackbar_0.19.0-canary.3f99af40.0_1600989665926_0.9275726273232432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.72aa1129.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/snackbar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ZxH+RZch9vOr1M63HN3SfoblnEIPa1y080ZsrhEQ/YD30ilQheYiD9nQZO71tZHjgYT5B3UUMV1aE8y/yrWFwQ==","shasum":"500c7331a23eb871267331b1d742fa3c6e8ed321","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.72aa1129.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblv2CRA9TVsSAnZWagAA/PwQAJ5mm0Q1vTk/iK3mQD34\nEgU+rwfA7fpECf81Mk2UUlr9raFQFuMSYKcrcBG5lv9d2r/DH6y/1Mr60W+a\nIw/K1I9twMxBJwFQr2nbsVgRq8aqV3dyAB6uuntf7XklYTN2fnxZBFiqM2l/\n3rXF/LvhR8kCunhuruhKJ5uaIRZ+NFhR2TLDZ3Ml4/4uvZoQG0tp0A9BHrlV\n11RW3RsTsfm4Pz3h9eJtQ2+FVS24/HOJeOZgMSo06BtTwrRioo6NaHGBCNSo\nGCd3JSah96cHfJs3QXeIfk9Ad5gpnNmx1lI4dD6DPCckSBwwEBYWY+jDzkcH\nRh/GzKGi9bQkezhSBu5Usamuoh/oUAJX25EmxeHn/7cYSWgVd9kRQ5uJXbSH\nKRj5G5begpK1cP8KuqK5g9BsoPkwwVclDwEMjhoLFF+OeYLCkEpg75CK46UZ\nzgZjcz/oF474lr1YTIFwvTndhweqGd7dt3ryWAfS6TIJFefc1KR+qStt5a0y\nlXGNxAmE8dKX1Cbl9+L3pO/tThxzXD/nmvnKK/J1uj45o8naR7pIvZPeUEWX\nXHJPMTCHYl+QG4ndV+vDp2OsWPjyLWmGyP8kXb+XnLs/0oSZ+YYK81gK1bgL\n4hVHl+uiltHqo1L1mpDO/amUHXjpNolt7Fe4tqbFTF8RajquO4Cw5B4hVkDN\njW2x\r\n=bqUI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATwLOtYkYhD0eNObJBeU5a+R0iQC3H7jLwLBdHwlM6tAiEAz7R2oQ69yYYmrbgoWOdliN1suLH0nk25ol6lh+GDvGk="}]},"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-snackbar_0.19.0-canary.72aa1129.0_1601068021498_0.8790214847154503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.394fd3f6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/snackbar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-KzLu3rwn0FiTsQ9c75NsUgBfHzA3xPYvq6cG4ze5r6q4Ia7ZtBN2tB9fbUf4YTH+pp4OAuV+XAfniXROMtLAVw==","shasum":"2a1107a1c0a9c82de315d0e9a147db80d23e616a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.394fd3f6.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce88CRA9TVsSAnZWagAAwjsP/0vjifO3+Hvn90NNgZWD\nvRMoxZ5/NQyFXczL14rhTL13HKEyvb3jvSWODgmWofpfzIBJkKzAeFlzanWu\nza7SZPDRWvKUKzr5JyTyeHEnNgHFcz/uIZgxzRkTPoeI4L5yY93BhPQbWmn3\nxyhEKetMUNPz4OldkkteyufHFXvvg3UD2MgosHVSi/t4xdl1NoIVJgWMzwjH\nqYoNyQHDdq+kttGOJ3vzSz/d3MefiKmpQ2qLVitFa4yauL/lwDs4SQuhqIny\neUH/CKNX7UuTqXgoo6xq3CI/nUtRAS9BKqMeKyYo/sMcvwCs89BAw1efFTwv\n2vi+PutDyaA+u2S7PIwNRFxbEnf3GGGydHsSXu1tYDMr4vS0Kc72iMKyLbb1\n9p7C2QO2XJWZdjWDI8UxeprdzKrKdnuoFKrPxYRi48xWMb1n69c09wFKQFBr\nf/kGIVOpSbBgBvpL0ALcfa3JVt7OgFe61+B2rtrMwIaK+6BhH/D7apM2d1tz\n80FPPrU9+13sUSST1TLcPVzkpEtJCKcQCOipT/mp3m1GST22qpoxmscleVDZ\nI4+AKpx4wXyOP4BXdegzGnMaqxYqJ30JjMZMsHDPhpzx/AG8xqFPS48rpjTW\nMrOa745rD2TmGhoaNhFjqm9+7VpwVYKlY2zUZDN+RBZVI6ZXFYHOjUXPoVtD\nCrDA\r\n=KtZq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXmf5+oBTgsWDuKtWwvxqT1oaqlOE1Z78Eih5r54Y8VQIhAMDA+62pQn9cRZ4HgIZRfEvnxYpTASTskRkEZk655g3l"}]},"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-snackbar_0.19.0-canary.394fd3f6.0_1601302332253_0.05827553951964903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.347110f1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/snackbar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Cnrq7MOzXtqSTWHyD0bZlJGTt21P408VbcuGf82UCXbhliuxOBbSgcd++V/96lObxE+x+FQGcxSzhNNEX9vI+g==","shasum":"d7e78fb772b2486d390185231761533225ce46ee","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.347110f1.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchQ0CRA9TVsSAnZWagAASoIP/iXFYcRxxkqoS31sdMBq\nSAwyhcUrXP5hmOfo5gLaGHW85MbrkW5CwHGGqZyuh9ZA9z5QhIjPtfEq4SHb\n0zqqSEjmNbdbmBnTBq41tdmTRjjFFFRIZseNRFQZUBd+tahCs6tsjUAtNff2\nX427Z4qYOMjbWHmFvVGsfPQcFmONxonkFPCEP7IS96znTyLFWtDglqdaGUPg\nMf6CbyJtGvbq+s//H/isSFey99rtYN+VvHGFciyFNyz285iRvVAbb1swgb2f\nIFaGrBCSEyrz1a7EQmUuu+hlB45lw1PC3AxmK/GtOyZ6/3NW1G49fnsxdw5r\nZs9XfuvKPHcOYS7giKFtT+Ad54PUlh1TlMgKzTjRyhnljx73vkwV/2C0szpv\nnn8GQeegAazv43ngKvTC7T+7E3gN7Jz88IE2dT70YKQNPAGyK6yClf/mfGZB\n/cG/S7D2xOlJBu9V/FgCORJK0Xlu3softWgs8hFUNKJbJvBpTStB+TME49D7\n1d3nnt/GSWotufBQXywfgc855CqCYozpLYZHSi1DeEQbI7P7FCzSUx3TBJLG\njtqIzZyQHcFavymIFAmhdr2vZn+eroj3xG6WsqJTu5O3BTEgX3U/QoxgtnIr\n/FBdGWSVeAZEYX6+RjS8FMYx5TcWaOf7hOwk5gEgvj8DTq/sP41TIr2BwSpT\nUlz8\r\n=g6+v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6ymzvXCHev7WrlfPcGFvhRYQnCw/Eh8negKzYxCEOpAIhALwQxG4kyuVs5xbeA+miGugcR2EQ3ELpLPmgvumAR8Za"}]},"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-snackbar_0.19.0-canary.347110f1.0_1601311796029_0.6661766860710723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.5e330bb9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/snackbar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-SzJeqRkSSEd8H+Nc88UItxR46md/QOmOJiOSWNMQ5MSYtGIOTqvoBnptD5Yf5zPcocN+nC/cbDKe4WHyYXxZDA==","shasum":"ce3b01b40c2d5dc787eeb944e3cf0cc9ae506424","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.5e330bb9.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAbCRA9TVsSAnZWagAAKmAP/AvQf+X8YIDAB3rpBAvF\nFYuolaxWNCv1JUex3q2LvsicdEc/ykhrcbYU/wa3y8OBoBz9fqIzGboR4Le7\nOJgRAfsb/JZ9ff0txfG57gct7Tjqrkx32M5rP7H+ysoWHH2px1AXkDbGUz5X\nErSLs6NHt/op84DfqPEuH8Q3reXyaoJuA910mMjL29LolUgbTAY/xT0XZ7hB\nM56Rq4SPk6w3wxCIMS7gDAPB5RXobZ40sFKtCyq82tyZYlBTpgNTrKjGwRe6\nq1/Qwzk0/N2jbJDIulSOfvH3x/hPG6efUQhM73V9ovNQWE9yqFamIE/mv/n5\nPe/dlsBQF35gMOj8uL3W2M/Ysv1fIxib2/Rruqv9ISm8n68E8VIWn5Punp5e\nD/EE5MfV0zf+bjTdGSTrQjHFNygLIxu6D4Op87VBsfQ6H7KXS+4qXsCHNmQP\nRqf+M7OeUajm8gLlcffUNcw1o43i5RAYJxVRobf/w+nOa8zGgCq5nIMlHPCn\nMIi6MZUGnsPYaYbXhOYzHT9OfEIzI8ZXwGTK5V3D4xojc4zeRNyqXi8njMEH\noSi8p5bEaOjyIAdfP0eIysY5MMmbH2cDP+0T0I/mdSfSawkUfKnXWmv0mnb2\nnxVhYc/G/hY15uSRk5GHGtmx7k9OLHoDr+HkzsTjXTPkaeQWkr4/IUPryc44\ntZNp\r\n=wML0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL9TVeJFApbiaeZoJ2TttRiVI7AOInxp4/EMnFlcml8QIhAIrGChc3m1c+p3rluPgJ/oHwxVGb+fTjzJdR6HuC5KIv"}]},"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-snackbar_0.19.0-canary.5e330bb9.0_1601503258628_0.11334672442302351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/snackbar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XQglreWYKJrkFQw2mdjXH2MU4FFqmatjkGljwlVeQgZeZyIBIhh8Z1hyHbBBAf/MJArZLRyxlNN+ZOzdb3iebw==","shasum":"2e1c6d5d55e4b08cc7d4057657e1ed7072751217","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.30b9e3a9.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjCCRA9TVsSAnZWagAA8vgP/1bQjIL5lpUQAsGqg+Fc\nxGg9QbeQys4BPx6udhJE/YG6plkL0AiALsfWZ2M58csi61MlxVOvBvzyVPfn\nk2z/H3J88wWDmdxct6pAsJ5ClExQKbwkN76bkHPzKJlJhvfU2GN3KxBmsQa2\nh4SOlwURdVpJkrLhlPhIek3ynC6WfXEQ2z6FsIgLW5BEGOteEiIDdQqR9vB4\noqRAefeyki8XaenVgKi8a2NQTV4sMd2tH0ZHHet0zT6O+wH2s/XMEu6WpJs+\nF0YOnT8/ooN2Go0kc6DNv/5olmeE5wkRS5aLHtwfLShecU9QOVUfR0n8jemx\nesO3RSSuIa+HXw0ewdJh6K4sKRywbYyKNCnGZJE5R8fyFDjBzbmqtaMsr00q\nvCrDn+mOo8OL2RpKKD5gQPlLsz/tvH6CA89HKWerobLt/hpCO2Em0Q06oLr0\n94teDSZRqf+ZnPN6boKMGK832Bx7f14zeHOUtsEW4Yt0lijQAstmN9JFoMCW\n9Hjx6CLxCPF26Y1GFew05GnpgY9JQEPIm/qzHYcPqvAJ5cmjzLpmlxHBrN0n\nDqhZrHAiqBnPp5X6FEAXpxwXRYZRlxhYDUApvDiy+ldq0ow6MVe9wIQdXV39\nT2o3i4mvYwkSIb3628MSvvCSb8NSAF3a4E7WqfbDp9Nol0/WxrhgzZD04g3S\nRKy7\r\n=OoDz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOxBnaHEnHqTg3U7MhCb/cQ5WhDWGRg2peoY0dNoVkEAiBgE8LCWJ5auE9vgdQJnq4oolGltMk1H1eOSXOKExiSuA=="}]},"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-snackbar_0.19.0-canary.30b9e3a9.0_1601505474071_0.46076919051423926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/snackbar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-VJ11VBaKKCLoJX0zGzRYLUx1Dhap0XlQao1vRywPYulS18e3jP4bc0EwO8Jqe34glUZC2DX/T5YYZxqo+a6CIA==","shasum":"7efc3818410543cb940f64c06cd336f4a7cb5e66","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.7bb04b9a.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmS7CRA9TVsSAnZWagAAVnAP/3QZl/PUPNBuUx4fba0t\npWvOnR4Th+/4VoMQn3AKfvmJ19NKDfd6o8ss5+teLjjZ6WcbTKEY2t9vj3jS\nwSEYciWBUOVG/+BylDTlQSoK9m/PIzRrj0Yt/XMXG0ifCbdrYHarlkrPanfz\nIbv3G/H42lga7jQ4rYKvohxl8213go0SKxPNXFEfVQbUE8Q+zPnMoXHlHSd1\nYmds2A7uZ81plBsUatoA2PBMwANyXjF/eqasGDIdfOCCuLa1hc2yU+hhe+6V\nDNvCdGa+xGMISgNP28Zi40mAFI0qCoimAD5M2sPaC66eyKMLyYuPSrzsQsj8\nvMeelRBCu1BdtYqgMiPxr4NaQgeG5N39TpqNT7QcvndTSpcfCR7rOCVQjLPu\n5eXRT+O1rp0102tpZlPK2p1ga545JaEM+3AXk1O0eX7I5v2aQep/RQm0ixxq\nGRTWHhFBDzxQ6tbriB4da/LScVW8bgAJEtzA6wBuzJfONm3jXOVP6UK3dp5n\nYFkzeMcv7tlvybIaphENZv3+DgK9JNtCYVZXRUYDPxUgu9BbQpLZSEx2lg6o\nYWNV8mjtbYKb3sjFGrCbxJIZ8RudIlWb/guIXDtwuKFxJITFp/9wC0W9b8+L\nUabPs55GuxaLy5xOKZxd7pzNMbfPV3NwXudSfFdhpiUnT0VShj2izjETFJmw\n89GX\r\n=U59h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKDuKzgjZ8vexa+JNvEBYzDHwHAx1MjHhlABN9ik7JlAiA5QCRN3MPUv/RJfL9aizqWqTVFPdhS0Y5AI15jk41c6Q=="}]},"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-snackbar_0.19.0-canary.7bb04b9a.0_1601594555112_0.8959621650747975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.615d861d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/snackbar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-rXyc2/C+Nr/Oo9TkvyrZbp4Hd2ecbPizpCPaD4ki5Z+nzLR1F3KCxODQ73590p+E0fJdSWYhxAtiflHbpAc+EQ==","shasum":"30f0ba6083e513b1e802adcfa7eab737c978190e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.615d861d.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNXCRA9TVsSAnZWagAAAowP/iqUPbYjutNA+0PDXAkc\nv67bp9i52e5WIghBV7vSnPokCMVhVEUfChq5+KHTExeqYQkeTD1zH3fNppd7\niAVJ8ltmnPK8Iy1kJuvrQxorYdL1j3R87IsSXiTNyNWijO0XRbQ0vXCvasWX\nufKTCZ2T++C0G/gyZLWXIP16RpoLGH2iRUhzT5ggK7P0jZIovFoAm5P6CwyG\n5iqAC05Af/ELvfb/KGX2I+g+cs3ytIqn1gar35lxp1BrICJoe8u7RIHxlplx\nPe+XlhkhGI8OxvmtICAKaSMsZVILT50ZDswtLovAaCLJy9xVCmjw4ce5Lu4g\nlXR7JWTwrjauMlhq6Mss8uGbUHHduI7sMPLEjnbNPAfk/4skbfg8OZ5r6Ck7\nBa9M/avXZkabFaIi+kdD++wNR+hcq0BmV1JBUTP05tlFBVt5CBEK4x+szmpv\n2BYKBeX9wTmcczQGhBItXuhtHmNpZXDZFUPW4Ddrd1fJHH41RJ6UiX/oUKg6\n3Wqrj7V4CA+z5t1ADTZx4QuaAFXNKRS0Z3l6+ibVa2PHAyLjr8yi/6eGrnMC\ntKENkIUi0vG4iH97hZ99gTm+WSc99FITRzYDeAKCNmLvhjyxGlimx87Q/ZLo\nAS9cfXUFTd/bQvNg0eN5aV3aKb4OjUtH9DQ0CGqvwys70ufnuejExNSNkgb1\nm6Q5\r\n=RSRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjEr598LG3/alGxOBzJu6eenczUz/chwvDTEX1LLO9ngIgbvPNJFB4l2ec3Cx6p1Vo7lRYeVqhvxju0rPVK7FBMSQ="}]},"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-snackbar_0.19.0-canary.615d861d.0_1601602390771_0.9637127185952756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.af110e86.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/snackbar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qGpdDLmCZVipeQg4JNW69KB/7EY7+YoiY0HLOGJCzTDTFN28bDqfgNpJVi6Mmyth0dvJiN+toZxBd3d+CKubdA==","shasum":"db9be9c4c554e4098ec4470fa71534e0ffe8cf0a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.af110e86.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yTCRA9TVsSAnZWagAACL4QAIaQH0pKs0jW7kpnlWZw\n+Ll1sw2iiC1X50x2j5pfl5BRl9VM2ULn89qUewosFWhKSHWJcgcO/Uqjn95u\nylcKkrqGEokvrwcjQ76Bi8JGLNUfQP4v4kgjPGR0qyZkI9qptTjSSN25flEp\nfOcKYxOitTDI2ceRVFgJhYl9xMQiJbFh3CRhhWQT5ZpC4QtzQpPtJSQ4A6EH\npVbRetnjsWyU4FkzAeTDeuIm54jXlC72RqFp7e4fVVE/J26jFpi/Z7i3qQf/\nWrQfg1lWQTDoexA4Xa2xBKcyxhCTxHN0RkYCmhpd9lii4SJEs5i97SOddgvQ\nF/AijNcemLMZMHdP7WZFJuidSmzJJpAs03VKOUUJ44zRm4MUnOYhLENsnbdc\nFBEV0BtU4o+UO5FVy+alZmS3x+EjzKVDXERNHd7fAThGf7tmaR+T9ewBTpe8\np+1pyEjWYxItXCHFKlFBvj71zDpPUzBCZjy49dASiVXXcloYh3MEq27hvp8r\nVRUPtA3YulVWXsvQ8qhzy4LnTl4I5drWhSIecj6fByTmYyVvZaPuHe3Caeoc\nu2HT32lw9NzA9RESjo9ED0PhPPq9y9jToy+nY0wPZWil/wxmMayrbaUZlqhZ\newQGJl2PaV2uE4c0MUnNoHfA9kdzTo7SJkJ2PJ0nxEG9Z+N8I7cOH382Brg9\n3CIc\r\n=DmLy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8SItUP8lPk/4rYdA74pcEMts7Y6J+JbkqZ/WaJ1f0BgIgO+ThBkTtTboOgw/tzWfZNF5JHwksHalLaFgIN9KcJko="}]},"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-snackbar_0.19.0-canary.af110e86.0_1601682579497_0.18641705430708777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.89d27ca5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `true`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-90S8ufr257IbnQr1u+al8fTw29krHE/EWbVXPX36WmJmhw3IcBSg0FZijbPeSYCtw2heLn/XU8Hrc5cu7i3ogw==","shasum":"e30b3de7bd49c7bfa58436b455fedcf727f2be59","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.89d27ca5.0.tgz","fileCount":16,"unpackedSize":65973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fbCRA9TVsSAnZWagAAiSEP/0eRpSjb29sV6TXO9sEf\ne6uqoDmWNc9c0xLs8+eZX6y5MI2Sznr2kRMOeTwNBTb5EVaCIyjMPVi2ubbf\nzDDVFAGGqAhIRByobe/nTGK/ucicnloSVt76KOXlbZriMI9Lww0ujGHTCKWF\n5l374kY6ux8atE3xvhhy6xPg3CQ8xab+8YA2ZZ7+b8RRyYetU+TwezEdUpVX\n3u18NeXYqR7gsP7i9WE5SSTNG6B/tn4P3fvJdRCgUfge6j6JFJPXKaTF5kHD\nAT7xIN4tXke5rXfYAaR/9clUaEewyqfPsdwYzswuhRNtI9uVjzpdZHH3GLOo\nrcKCmdGdHJzGrr264hGNBvP4jGHIJLBq11oKKLbehf6UiOdgVtX0B1LEDMFp\nEtzet68DcDcGRxUsVpyfI5koQ8eGM3XAvSHi0apo0YPlP5+OJE8vqmOqYxov\nkgYq2XY5d3vHckqNteEcakMEbEGuK/eK7mfkXuykUBkjB0QCcnw0Zetty6gC\nE8cFcg+OuJi1h1SAlvxUqEJEsQHcxZJdUohI1vNDSBAOGaGodsVM0c4tsk2u\ndxFBR2t6B7Z80dyCMttxpUlJTgNxoqccFU6wdpQ9Xv4n+gSxt44Hvg66a9OR\np3GjbSNvOR9Vb3ds8qk5gGhrUJWicxoM0OXyA+QYQgzbZPRhIM9u2RE8YTWu\n+ctK\r\n=3+wR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMythK1uT45T3xLBon3W3n1YXWEVDmO2VVXN1bm6laEAiBTEhOniAW0346MtSyiqEq4gaOGvbVHEBYHnrlq8FFd/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-snackbar_0.19.0-canary.89d27ca5.0_1601947611502_0.16810163541986722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HOWBxP+N078W0XcYwSTo/REkvJJ1gGM7bilIhQHq00VJqUu0gwrMYv+elj4E/NaFkYbY83n6nVUxoYUfRc5OHA==","shasum":"e47e013d147f6903bc34cf2c96f5db61ee11d32a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhSCRA9TVsSAnZWagAANtoP/1GVXAyLdmPhF1+pP7An\nIepLGzeRe9td2OohGodIxCHAkWgKogf2rEVlasdcDM+vs1WjNMsu2OqWgCz8\nlaHyq0jAeaWgI2u2Qa3KGn0hDz7cpr7Yo7g2E7AzKRESMZkoYAWtcuwWwlKu\n8cSPIqj4Hc/tB5kxWmPG7/UQzUka39+byzpjRrz05f7FIRRTzvsLnxpmPyVs\n61rGcvMhhl2Urq0If8JGGvQV8Y++0aKuDZit9TVnlYtuSCDyZGuwK0fZ5Ls4\nyp2PnZoBANMtjmMd6fwbgKx5rYDsK/y4wcszdBl2YoZn0MhHmLUuhiO/BMO8\nfqkJyeJ4DLLiDmksXWwVQVS6HlSDIMYR/1VQU5jXXMLqY5szcyHTe8wBKvkH\n09X9GLQvXtQFPVk8HVsUgNaDoLRpEQ+mZgku1Qv3z6O8BVzhvxQv682EO3fF\nXnCMOICtWYxzrXUQmVrG9cXqx6iWTt/+X9vzRLJLJ7Sbb1O1uGjEg9yMNI9a\na89iouIUDfJpzJCVSvldDqEOOHWngys+p03ACYenEMrADOLR5yE9Y7n7a3Qq\nk9dz6aEgXiShACuxEeWoOWG/UoLXKeKDfr9r3/znLZdzjlDA5B9v3cG1GG7Z\nSXzpV96VqdbCIcqN/Pk0rtM1NYmYYO6nqrhqlC3ybxmp6pDRBor0Fjld/FZx\nQDLM\r\n=Wlb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGjoKRp7wc1MTRo7qaKdCNVedt9EqIpXcloKAeDSX9+gIgDoZkVP/4zcEXZHbVa1kKbo4+oyFFN987xBCuzfTZ95M="}]},"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-snackbar_0.19.0-canary.9ef2e7c2.0_1602029649754_0.09000282074947408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-snackbar","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HAro1BW7q4ZrF+3bcisjrPOw6tKzugDs3RSC1Y2mKhiW3wbjBuIvFYqqDLFSMWYydZQ/51G5Pu2tbTos7QYgBA==","shasum":"8406eb816946f0eb248036cdbf6702cac911fded","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0-canary.96c8bdc1.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAACRA9TVsSAnZWagAAVH0P/jFzj62G6zC88YvDP/bp\nJDWD0bBvGRjyA4cDZlaGq5sKnnquq/dVXODdHh5XJ8r0D8pFqxNIsZTCuOhv\nXZdRxE4x/MNV23uF5Vw6lkyGhPSbKs2OMtQkjboILNZi1HA5If0Xz4kSe7P0\nKfrX3+MxlvJizovk7QvmtY33Beug5MjHuRsHJI+dpplc8ejIrNr8ZBtM+Ijq\nKr3/OmzGPP6TAk6fAER91gDeFvNbbVZ6GaCkdj4fj6JlOqcppZrcdqUMdE4/\n7hRff8S8D/tIyH8kKVJo6swniUSbwIUgOnzDOeHwvuTtM98oyjLSa8tK+YSm\n8TFoaBM9NfRgQBBHVDeX//KiPezI3tQ/4qJCGItGHsCxmMsDAWDc1RvklbOq\nfpoQ8O94PLS+nr1ZBT4Z6B+tDWD1tWLKPdyRkX1MXTwKDupU1FGvs5aMMZwv\n28JVOBu5zQopxRcygqwJxGoEm43DBiBvDEyz8eVoHJaDnzzyfIwdY44zBc2T\nzmSh/UUtHqz0p2AMVVuvSsfHHdQTGun7wCBXtILuhMEIOpZ57bRyxfISRGda\nsJd942BdfTW9CpSfXgdKezhuvX2mK02mcwC+K0n0PM0DdvqKlLM4O/5v/bJ5\n27Lh17NPxqiiTvQjDXC05jIlhd08FgDfqRGM2Rl2Ltok/R4xR2CqIZ0LbYFX\nVVpI\r\n=PL//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuEy/uivbvf2fpumtdvz0JOMwVzYn3qLQQ1dc0rFl9mAiBltWvDaUtrsvtrjqAQwZTVZp2/xoJxBkucZ7/Lm8iP+g=="}]},"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-snackbar_0.19.0-canary.96c8bdc1.0_1602101248402_0.6905216590222829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.6c21f034.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GLjjOhp4owZ+MVgBscuRcbdcUNw+YPa9TWguo5/nN0/QPeRFkEo/C/ZgNxBkZkF5iGSvGntnG7zh2l5OAsVimg==","shasum":"548b47db0f77fa780bc771bcc4c5796330221a96","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.6c21f034.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkF7CRA9TVsSAnZWagAAKOQP/0lLb2EhEXD7beyiEwK2\nT7wmuLe3vlpA21iVG/3AeO/MWkLEeGwGNUfSJDvu3kEvyleTNTh3iIbeEgC2\nQxt3Hg6l+oVRs8CTuYncs1W4jwgITgjOgG2ai2fOJkJSbCfGodTdDu4B/YqA\nt1VtgtL3UqJTS7fftBzeDuGWvS9uv/9sK0nX60jb36c98K91q0sIpMTjYHUj\nPvgjo553BChmxz0NopMsU+ptzMdNK2G59N5lqoBozhUvsjcRyJDeyKqap/68\nbqLfwXMtiqT8kqu5Vk4STrN/pPsiTJrbDkSO81U9Tp+TjLkWTYn4h6SVnIs/\nLDt19mAaPCfFY3zOWi9aa5Ucf3HCxTup+cSUAJ6SqcVvtGB+MT2sdaqYiV4q\n6x7p4pkfoGMU/UYbGppelI8CyPYtE9rg49OtRLNBSQP8COXsfarZq1iqqHVh\nxwd0m5yyA1lEEomB39M9gRLWpxNNdOlc1PXJU076rFy+p80wUcW26sDirc7g\nNLr4mjzbcl8goLHFfmWZ6UK9IcbRpSk2fqnevJrz3mDv4JD/u7CZNa9+4Pvn\nwq0nLIfPlgvk6C3+MxY5/ftIystn73eKW5viFKmEY5OqTxCmZebdIdLKJzxg\nuRhN/3pjs4BY6cRZk9YCPB9f2sKSkfmKjMJmoOwHEd3k8GLAFxCO4i0LgLTL\nhPrh\r\n=vIiv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4Csanr2FnmBP+v7ZBkFg0NnHOIctRu2JJvKWGpfxZGwIhAMbSK9LOeSyxJYALbUpL8HhorovjaQzddLq70u5ac/20"}]},"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-snackbar_0.20.0-canary.6c21f034.0_1602109819022_0.36366220015199446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-snackbar","version":"0.19.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-snackbar@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-CDcnxkW43mUaxg3y1aPgeB2f//MUiMRYldyGeOP2hlsi8fkd79qpLTkBA9Nd79XUxjFQzgizUgw9INXe4aTnZg==","shasum":"4f1a6a2c55b3041b7332bec37fe6f2c6a32e908f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.0.tgz","fileCount":16,"unpackedSize":65939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIsCRA9TVsSAnZWagAAbDIQAIdac2unAuNKuFVIP6Ri\nIyTeEgBEVDK8GkdV0Nr7WBWw5nLbpqGNLY5orijkEH2M3rrZaR1eAuMFGsBx\nuXAOC1akk6Aowc/ZY0tPmBAZEgb+N4GPyG4vdaR4ZNm6GAoxOQv/bYbZ+gB6\nmQiVb5EjzdLKp/I5wIhMC0ich2d8nSVVN3ShMs0VLiNm2JIwPVX7jYADl/yX\no+rLXCMyAcgb09hoXIjxiKAqTkFm9GxfMgqglmiFWX5ko/55vbzDjgAv2f+Q\ne+rVFf9whR7lsX/0bFm7vkuyV8yyE833rJojkwE9OyQ4f3wW2DBteZwJU1Ye\nVyyHaieoRRKM/fIK2humdzuF41XPRN3ONKQDNTgWatHZnoK+T31JuTLicMsg\ngY24ybVIJZqgflVBmjmdGRR5BsrfAC4RGMTuuRA76UgyrZiMkkUX/1MTS+J4\n5DkZPwbeUkHocs4+daUxbaD+qxWtjE2+qAZ5o9RJe5u9AWz3qI9SWplKlJ5w\nJtiG4Ww991NiXp6J4fYXXrqk6L1K3S0GPBqq7OJbd+tdZJXejQxOyJPFfXB8\n2jKxJSU6nn/bS6zI+oSNtze4/NvOdOG/S58n22tOcNAfHjD/9UgmEbu3O9DC\n/AJ/efhYYlPCP8+8aECjA39dLrA6xl3FFavWEkhfFsBcEqsl43W/a8QEo30A\nTsGl\r\n=p1Gq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYuTiQvhIZf9+1t6c68Z94glepZtDFgvptUSrA8JQZ8AIgdCRPVddgLuQNNLro1cecCD7tecL8s3vLcBqT/jThYQg="}]},"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-snackbar_0.19.0_1602109995560_0.2331681973681463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.1f026aaa.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-PLRLkKYQTddDCOTKIs+LyPvt/ASWLIqdnk3ClHfDa0tEavEGH0ayZH397XOGpRmHYq77A7lZTeCPGsViy6L/2A==","shasum":"25cefbf9699683df1f12b789ed63de9a3b2822ef","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.1f026aaa.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5hpCRA9TVsSAnZWagAAFEgP/jIIDc/UxKKrjdsYucOt\nkK8cFSX1o3WlSNF1U3sSeqwiDKOJz1wYh70mDGfvNcqRXDsiuwqwHl3lK3Oo\nImj8l8W+oUj9WOZZ631f1z1ViNZPot5RqSyQMLgPnswzKjbotWMYU9Bx8z/F\nPo9kSoMtDraLBUDsAdxh2Z+S9mHGtdFMaWTes+v/el/G9swLvLRsqKngN/Tc\nNEjwBF5572bgQl1uni8ZG4TdNDWLS4dwOFSxgRT39ReVHHSuMR9M//PCiNXL\nlpRSQOx5Xu84DQVIhjVhTwHq+7gooLRQV75O6gKEi/UPZY+kRgT+07P8drhP\nEwytl1yLcwXMyPNO1R9X79VD8VYfuK+IXt6GB0GMYXHij/WN0S+aoIVlReyB\nF+3P8RX41UiNwHKcjD7B12Q84BTCuQAQJsOlwSHUs8gNWLi5a2Q1YguFtCkQ\n5wmhQ5yyakZRgL5faSUE2CveQNvvMxlP+lZG5fQ+ErqtFUx/nRGCGJ8ECPFE\nlRgJ4KEHPCznXoO0Uj2whvY4AQqceBR0B085+J0zG4nn7uCHbxrZ+zPeb6FG\nEWG6/FU9qeLbZYTVFV2Cy9LuhAfpnTS2S8oMth6Lrp0WfOVWAPI2T8O0mDId\nRSAWy0c+fuaoSDt7xifpGfLpNithvqIira8fhAEro8ZmQg1GXRTn+ZIkp0LQ\n8snu\r\n=9Qyu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTt51SWiEHKGFfqs5JqDYHbyr4a7aJvCTTAsb/Y99gTwIgOSYGAv/LhnMUVZVOBqA+pT3fuw8OF23HgH+gUkg7EN8="}]},"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-snackbar_0.20.0-canary.1f026aaa.0_1602197609404_0.47750238989670146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-snackbar","version":"0.19.1","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-snackbar@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-fsswVLTRFyOPPipn33lstMhvSgeA5atsBXbGp1MAlig+pEJvO2UcctzS9LRXp/1xASEg+587zhUUXTCfa8qbMA==","shasum":"246a54bdc5c062bcc3994cd3feafaf003dceda70","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.19.1.tgz","fileCount":16,"unpackedSize":65939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tOCRA9TVsSAnZWagAAINgP/3wfdF7K9bZe/m5BoZib\nVsA0Gso7R1tDR+PkzXR2a9+XRatX34+Rr9KTJsV0z69tcHMVLymb32yWchSr\n9N7JTa2cmVYYWvdq86DLuUmy2X1s3e2OyzTLamzwSXWIQnC/csv+hlb7KuHP\nNzC/AC/reftoM0bolIyIsx6+TRHz2uB21jLZqP8teUXn+7yc+NchbqbGvGrw\n1a38dx4bFyt6EPPLmsro8YbPIGHOe6WdIn02/NyaT4aNYrFStvOsrjJWxvtG\nGO3b/lt2B6KF2ROUeIQGWiKIZe4e8zTKdKHEttWNNw27z3YLVZmwApOrqrgu\n3x8MchXI0iv2XL7Q3uvnrpvvSW5aOtLrh280yILV/Y+At8Cii5OPAjRLFmNP\ni0+Mze4wg98ElJb0inKhV9k1Y5HoMfdRr9LrLQvmtO5aFj5Bil1nh7b2viSM\n5H6Y5WjZ37YeVFWyok9WXHkgPGGi6PRwjrrQ4fkcT0dhdKCnH43NVFXORSai\nPws7vCNHN0Un7k1YEl7xgGxPSTs9n2iqKD7U6iC82i2XBLH58a8VRTkmUqqf\npH1tSIpcQehcXpgdlyvSzRO0njo+yyXHor0hqBoclRNvlDonba4l4g+hO99l\nANbKRtSHUP8hS3zTXi49SmITT/42ol1NUiz8xjyNt3//9OwepZQABTja6K6q\nyjJG\r\n=TZrf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVgupocjVvVvaMGxoq8+ryFYZrxjXYKIvZijTUz+2hfAiEAmXJtMXojXKlGkbnmTGX4QHl6uyZBew2UJ0mNs+wGFPo="}]},"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-snackbar_0.19.1_1602198349616_0.575506817858517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.5f6894b1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/snackbar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-xgPhNhSjQ7FHWqviB/d/MLhu16G6gZwIShlxQejMy9xHn0icpxSBfX6duNnIPuBnprHlA4WOdN/zLABq8X72Gw==","shasum":"b7833c75decc23bd195c37bcf5cfc605648f791a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.5f6894b1.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uFCRA9TVsSAnZWagAA1P4QAKJFA3H+S9igmRjs7wSZ\npaOYrLUjWII4ghSXxqeaUEwIkJCwRZ7ibBFjYDlDOPq32GkED5v3rHrguWdp\nY28mhfGmdf8onnZcSCQ51yyPTsLoxLGRCxHZxic+koZdI+btFi3BSW4lLrmn\nx6U1KPgSnZj2LXgUewoJlexl78dxrVWdM8WONTnB3Dh19agNvMxiqm7opOtT\nqaR0SFZ+vp30iQYjWFVYhEcctiT5Qvhk1Qt6oPOAJj5WDI0AUuY0b8GsqtSP\n1HBeirSyosga01svvp9Na19K8RIndV99D3A0RNBwrlsBDOvEVbgr5a9Ttnvn\nKYUuIaO7Yieu9raBjIxEcr/hG2S/gLaCSxXXKN3+ioQvDkLO0+XY+qJgF94t\nKC/4ppKf4oMQBittKZZxPgwfvrRIqjUrrXr0t3Y9eokFjNMTL2hJIPRb5XEU\ngzVOLNg9ij8J0pduLAKGEuf9bziw8ztEHF0hgePLAVZTjC0aaqjlzUGht2Ln\njsQEMW/U3XhZ7MEl056q0oMv3faEg3rPOsqdzO2xpoU90BdCC7kl0SiQDVOp\nsEV1C273TB114f+8q3Cbbw40yFxHOhPgA25Mo7iphP+Glk9EwHTwKE9xZy0c\naWhA7vNBnvHeL6emeEDs22aKIYEBZur4yibUJBhzkmyOYAvO2WdZeRsGXxt0\nM1JQ\r\n=mwfY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnJ3okAzV/FmRI63rCfHCSE7dXdbc1BtJwtTyPG0JhqQIgKC7S+HY7L5OTspoi3GZ5J5ByKxcoeF0dHInfcW/6PTw="}]},"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-snackbar_0.20.0-canary.5f6894b1.0_1602198405102_0.03682420223870686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.f6260d06.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/snackbar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6zTHLWbUrMV1opc/gK7g3JCXZIqqsxZRXbyWsLerAonF5EJDb88SKJzJ8S7ZQ9RaKxWcDV+OkatSWcgh4isLMg==","shasum":"3149934099aee47cf8439a6289a5a79ad9901c46","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.f6260d06.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNneCRA9TVsSAnZWagAArkgP/A1xhX0sZ9pTjVUxZoL/\nqg2InM4Pc8Ld23Bc2e9kMO1EhaJJjJkXKwjB56GrjTmhT0L3so952Tn8gT6t\nCFaQv+X8F6il4U33Uv/o4Hz84A/Dq3bJbpWCiLsxh+Q/9G5JDO0ZBlkm4bRi\ndYcvLSx4lYLCxmVm8x/7pi8GkX7K3t7BtmfhWUqKfF7qaVMMM9q+ZyhqmsmG\nvpgLED9qi1JN3kBWe2k2TThkupa+MAEvM+9W2kXUramuzUbWOK7mvbRuy9Iy\n07md+YhriRW3+fY07Scyq5hKS9x4UvzuoGK9BGPIjJ2Zfg/r1tavRFd+UyZs\nKAun3hd1dFHQ3lUermx2viRW9gC40z4Z3ReOrJ3tXuk75vD6ToeGEaPWNfWY\nIYCDNzox+Wz8Kf7OzFeV98/WZbPamtPP6mwg/fd8YPXORzsAzTwQMVYtuSF5\n8sMaB1VteeB4+Fte65UUVOo0z2ZRI1y7+hb0l+EIbrqV8sDgF+ROuv+ehn5A\nSnH4qJmKoifssE7uK0F1nrTypIupEDQk88OSrGoCTwzZU/izwkA6MBfrnYkv\ntJko/CUSKzm7ChvPwQaXjU0pD4KrLuOkk9qEhuUisug8dQCruNcWUa5qg328\nFqH8NC3Yyb+TkNM6nPVzSr6cb7QrsnIC3MORAKf4nZ/FbKi7Byr5/k0vObc6\nkqMg\r\n=C4vd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqwtt7PgmIoYLHKcj5su7H6WMQSD4JsAifZgxg4JdBHAiA3ENrrrpcPI3x60ZbPFDY458J0Y2FFWkVkKUoJKIjXQQ=="}]},"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-snackbar_0.20.0-canary.f6260d06.0_1602542046221_0.5164350964114575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/snackbar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-U767irwSOm/wljNNSoeF7vxYIZCFTSuXSFS6EFpt041ZfKmg6UwdjWH9GkbKzAGFfMCUt9SaIK9cOxglz63cXQ==","shasum":"b2ca58b37991d19d67d96de8f87b424244c2adad","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.2d1b08aa.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5VCRA9TVsSAnZWagAASN8P/jqALUdWE6TkT3pAC1SV\nNZtl9QTkS94gw2o2fCIQNjeRc6dOmFLjBHUlQSa22d7SX1eRGREDweP8N0fg\nBHf1yTkfFNz5xeKEEx5TIVKVRcXu7+trOhQ4BvHiEMThC6IQd2q6R9MJbmOi\na7uSsdRrzSmJROpfhtlAL0RiMthlzTuuDXYuLU/sJx0C2L1GuG+Wn9z/XAQ2\n2z7cypP72fOG8wqHUCthUcFqfL54yJkdlo3EiTDSMRJgCGsWemoazHFKDR/j\nhFZnbJjrPPoL3juIAdd21zkgS1O97pgSbRjiyP6WD8vRQR7Y5SVZnJF2VLQh\nSghMjRZDThcdDGnFeydw0ELYnVDuoq6Obd9E1EEF0v4RJR7DG4XUxoHwYuzT\nViG5brcfb9jUW/XmPm9fIkk7mRL225RlWi8ZpNCrh+B9dA2ScGZ833lAeIDP\nLPKOsxM1+Y3IFwadsR8QO8gT3j2VOFEW1KXPUvSPXES/uzvyd3wIHx5qR7qB\nEHUn3Zfn8cGrxeLnENlXslq+rgZsKwG1hhdV2/Fm/9PsMvR+wU18qI1XkLg0\n6WBwP1DXpjdgtAauvMevVglKdDELk5kwnS/tYBGW0xWIxDmM09vLE0z4rWTi\nY/UsaBfaMHvAK0yRbobpdDoFpar+mzDnntt7rPNmLifVu6fXM+pOjwFY7Y5c\n6BO2\r\n=/gsi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdpAHx+nfBC8PPBHMspWHZ94KFXlosb4lEtDZThs8e4AiA1RpyWjF3oV9tnt8KO7+UxY1ABkvDY/iof+mxh6Jhy5g=="}]},"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-snackbar_0.20.0-canary.2d1b08aa.0_1602616917396_0.4437916371869266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.5bd58844.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/snackbar":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.790ca85fd.0","@material/rtl":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Y7gE0ROLgQX88FLH/rAmnPHa7R1hgRCWc8GsCaLHSQBWJJC4tDzUAUK307bhOrz9mtZQFJNHETHttlzYxT1CbQ==","shasum":"63e13d5dc11c262751a1f8705c1aee3d9ba3b5df","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.5bd58844.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjw+CRA9TVsSAnZWagAA98QQAJ1hQx97P8yiPE8BSDfW\nIjDcSxX/DdleiLTtMladuR0+Z3l5pZJb2+D8GphOtCtwjZIsYkwibFjkFVRX\nwizkOcJt0djRd48FVQIR9iuoWyHtatbAUQkGIFXahCm5QWmJh7NddD4kWd4i\nJgN4hl3Vuq4F/EZK5B7oISul6NKF12TR9j9MkyoybaG4wrqURFn09X7f+mAi\nTqVKb7RdfO04UV1EBjkpCQ/Js/NMb/D3tR/j06hx5wQzftiHNP2tByCTGwXZ\njDasqaqN4Y1qWH+tyvdfZMzNaqnZeRDRNetBaeRP0vyJzz0OrDfGxt6+Diih\nEOtAkcS9EEaf0DNd+mU3YZPvMtj/oe2R1wo9QYSzu8tNTkxo0qMtOkpYZHkB\nMe3RIxj13GgPU6ncrZ8hzlSeyqXz19kOWyTgtfXjG0mieRKt14iskqpY749e\nK+WY84tG9O6A+v5wn3NyQdRaA1Vm8a72bUVpcvdKlS1akYls0mXyt8Ke1vdw\n4vL56SflKTMAPWnJ2FjZRsTTLPr34nMlSlg81JUoudhaMG8LKITryVVvvoa2\nH3bMD0qurQkZV1GBaUaB4Nr38tGNAQj7hVJvLHesVi8jamZoh+P5OtsedSKZ\nUQx2UR72Iyu0GipTMkZxg5Nk1XW0rHhDVugnLeMMI+gQN2/aAIN1M6YejLh+\nIFLs\r\n=H6SN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPh73xVeylOkoqSEylm3gfxDFa+s6KdsYD4AJoJkOX8AiBLn/kzIPfyjVOfMJomriL5jqGXSKwDeYKjTBvmmYQTNA=="}]},"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-snackbar_0.20.0-canary.5bd58844.0_1602632765586_0.5482197285579926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.bc846b29.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/snackbar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ma1xJf0OFrrqV48f2rHgsTfwwASWDUyIgSvTHRe38bZWLErwb5W43Csn/A12APZxCAmEI3LuI0slUZLt9KgwGQ==","shasum":"aff7d40378a2417877a948125f15ba67f0a42f3f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.bc846b29.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BJCRA9TVsSAnZWagAAEvwP/3J2IILERwLXfTkOl50z\n4JadZJrRF4ao0pxdzpgWVImyzIGbJm+ye3XYFqor9hEriNhYtzMLGCwVm3eI\nDzHI3NtmIkdSbCtXOYoA48J5Yhkj+Gs3Gio2juzyr3RGJXTkg/Nzhtl8/6yt\nd9Mab1xeGM6J9Spp8ctzgzMz+dWvi+zwPesW6+WJ5qwWZNoBiAg6gF17fDZP\nkdG3f5gklkmXbb+jQKuroENVUms0tZ9o42v3RNKJVWhGxfNyXdqw4ML1taTM\nyrPEqL8KLrx0xm7UyAgmI7MuhSBEKLI/Qb9fhIul1Mmtq6oNtYkpDNGAMmua\n6iJ+Ax5CQ2O+vIUuD3ohSUxETr4fJvYdfVttmz4+sG5Kni6XZX2TyZ0zmLC1\nZ7i0HVXNj4anhan7bbSvB04XJtWsHN8FChh420FSbqeGS4611ZzkS1t5YGhy\nIDCa8GXkJMx15u7P5xQmegEko/CiSmu+mpqK81lTLdX+hpEB9gNrDCFsJ2EB\nIxjggW56U+2MKEIHEg/KT4KBGvNuQT0a/8L1G++zq4rMK+gwAveJOk+esonn\n6/B0Fq6NOGbiRHQGOPNXX4OcEKgBDM6r/zhtDXeKLxEkfPWM3WRMFtt0bDwj\nBny7JcoiyU/Hwgf3QmnGxJGSrZ8Pfm/gkZd56fnl99tnof2t9ECBCTovK+97\nHTt8\r\n=Q0RF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3u/S4a7KD6Qe+dreer4L+CU56NhQbMzDS77WCkt6eQwIgFkYnjrtov/Gb2WlcmXstbiTWMQhj4zqXkMDl6FYj20g="}]},"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-snackbar_0.20.0-canary.bc846b29.0_1602699337469_0.27312680043611115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.3280b686.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/snackbar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-VM71dxNQpLbSd0KlyDxNZjIDhOctbMjg5bzjY8c8XzGbfdskz+rK9JwLihP0CW0hmAWQ4biY5PesI1QK2eFWng==","shasum":"b8df2182dffa5d70ca5ce6479ec7735ec5a1696a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.3280b686.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiON+CRA9TVsSAnZWagAAX1kQAIlpUkXygs+hthHs37rT\nULKR8aIddWBrYaSP1pmYaR3UVs7JYoYbj6fsdINaW1iQkxHaonj6vqZNjpvW\nxriL/Pr9yzsOqAV82cQwCj7ERBH4npk8Q2WVDGiH1LBNha7uLA735JXF8wg/\nd0id9vD4OorMBVdvZl52JNXULNSaEjNeof0COp8Kl3wXLmSwNbMEyQNzoUHF\nCCMJ+gQLdsH/so2fnMWL5UzxcLPeabWhJFxH2esS62pJSt1UQJtd1CiclYC3\nnIst5FdgFt/t+hPaDQ+wVuSZ/rahUVymN1aln54gx26nWVbUDR3LWspvlVNt\naqW9bFhA+vp097/xorK8M98FvcrKL6PSH9jaJ2bvXKLb0PNPsK3Lnq7pZMB7\nkaQz43jKXESiFndvTQFkQw4GqUSsIONvpv8AFZR3DOpLE8WQE3evig5UAtch\nWd3y+ftFS5Sy/wjd8jDLEvjuDvyvXqulob6UNLLFAMtwnFh2G0tmhZ0O8F+l\nkHJVjldS3e7bFgxpviJ8ZGAl7VqkkHDOmlqs7IEOJmNpBRjf2qhXJU9sl4sI\n730FzMesqy4CGP1MUDsk9x2FTfonKkI5AW4yqgqo7Q7KwC914J4T2lb7bqOG\nCw7QiDOVH/PZz/sBjj51/q/5rzGmMiR5wwgu6byI44W3kBYXPGe80hwBYli8\nJnG2\r\n=2mcs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKt7zTnnvXTFFGwZG3Ls9Z03TMZcFF3e8X0v69eUriSwIgQO90mqpSYPF0TizNf5WwBeVZSjR2emz6trTcm8dwzuk="}]},"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-snackbar_0.20.0-canary.3280b686.0_1602806653557_0.019095217201115178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.9e94cd38.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/snackbar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ajqNyQgRU1N2TmgfrfulPI1mNZCg3BQ0ittvyHU63EhGZe3eqEjw/nbzqY53LWZ3uWYhC+UEgmNWYNVagOrfEw==","shasum":"aadf7ba1f53ffa69d919b53f93f2bcf9e12af744","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.9e94cd38.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig0lCRA9TVsSAnZWagAAq4QP/RNT1I33Lh+oRQC1lELY\nk54mNphyMBDKGghNBBZ+BUeqVkd4zaaxvaj7BbSjWLqINBhkpPtsg/YB4AxV\nPznTw3gD7njRVSN3bljKj4mEHSBg+IsJgU1bNCEcTv4DI9lV/pTOUdjhrS9W\nub9yPoPICT34JnS7yI57Llcirk+tW95OnQOY82DLAn9wvoxlE1YJ0LWSX2zY\nmbVjKvL7qicnshU2ErCH5WCKDkDlBdAqd7eTU8YHlLo6iYrGDc6BiBHPqaES\nhyc+cV/kKAH+u5uogwHGilNWufBszUEZ5QBjBLIc4pWiKUdbxOyH4WeW1AYg\nMR+6iYCCBINUTAK/GMUbsok5iyKsDbxeBu4Zm5oHEiO8ApTjTSKS4bJ6wxLE\nbmIcYXlNAU27uXHE7zDAS3427pLpXFeNMfSwYbz18e81tnzCvzOCn8oWMT1b\nf8oX0DBi5GoJYNaII7XHadccuY8+n07jbdDta4Zb81R7yRWKQSt25F3IiLji\n2Nu+Yf+wAeuHDDh9pVDhHYgNIAs+y3xvHMuw0HHEDc6bX2U5k7WIC60Uv5+Z\nZUH1vbGwTIt/nCuwcSfFlGpTgSzTWq3GERpE3hFDpnxxttQu+XhEoUJHJb7R\nvOgnZI1dxoaNHtMtyQXO4ddpSdzgj5nGaHjIaBpV5Lo5IZUcHPfLdgvid9A2\nDGHn\r\n=RBK1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSgBBnykpMteSZEHe+ExpQ2irFJxMudDj0zuYVz+ejuQIhAOcIKZ6+0YNxtgJH0nXQaitymEa+x4vuMd+6vWeGL9jF"}]},"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-snackbar_0.20.0-canary.9e94cd38.0_1602882852712_0.2376924960073361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.4773c773.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/snackbar":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.2ab716cbd.0","@material/rtl":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-auOoLX8lGOnukpVHk4NyCNHeeBN2K+gd1NTDra9HR9KocaSJJJqOe488VvfxL9VI+OrRbBxmZ9cxGL2XJllfHA==","shasum":"b1b5bea9dc956c68c54ce811d33a7ee5ba9d8b7e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.4773c773.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/ZCRA9TVsSAnZWagAAbosP/i9+pevousNZyD+2ONC4\n2qwL+lMpQWohY7Vq/ZC2OnqLVzpA9qmCoa9K3tbIPWKwUYGpu412XNlEw0hX\nqOENxJkJxNTrW0tzPMiw89sBNmHtMrHbsc3wPHlHiwq05UFxmCA8bZBIYDGM\n/c+r0/Q30wvWVOKSj1va8NrxLt3eERNZT2z0N1bUKNP2SXOMkXTwyGpr/bqJ\nweows4ZXc5U9AZDU2V5GhvaBZiSErbeuKp/nLTMKjNmALczamQ6u3DPYjZxX\nwmZBjS94V2pC2kKxzoLzFOHXDfFPlBJNkj96ol/tv5KZH/s2hkfeDS4vUTzS\n/pEtemdk80C3e31d51UDcpF5rLTt6ne4jt5bePM3qUKyy0uQvGVaX0nRjW4y\nPWVHFgOmnWMVGpImrlTn4iPjfZMQNM/l+6DDIhoFEiw0ZLrh7bPpM3myCQPo\nyzVGyN0CPLDDMPVYtcjdI+SwUgA6g195clj1pvZ3m5/2Ex301n4ec5Ku6AW9\nuxuFAuT+LPn+vWdvdturUZvqM6E68dIJqgmZBA9m6K32XS9oQLN4Gdo4q73Y\nQH5rFOdsLG5hfgWKptt5vPDv7A9VfMfw89pEzRy4NFqhpGoHLp7Pqak7IhCj\nYnFKEfKnf9zdOlHDMh37SNqs6LxrPSjxAcFQJl2g2JOitojOlAt2HcoOg4yv\nbMQe\r\n=bm+d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUNUOt5NXa0nbmzcAhQxPENKu97CHMIY/rfcOVZtzk4wIhAMkydEMIW3SfwJD/DHCOYrXYJkV1GzICZ23hivBQ5n6R"}]},"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-snackbar_0.20.0-canary.4773c773.0_1602887640177_0.24694329498064915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.65787913.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/snackbar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HMM8LOLW0ELttmfsfGbpWA439Z4lfaIwSPs5Ku6k7PZAS+P0qHgTCWSWNklXRRXodf5ZD8U4D8L46JTjMPFGDg==","shasum":"323621f718c13c467e21a26a17338cef3ad9a76d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.65787913.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeACCRA9TVsSAnZWagAA4EEP/RVDTW7QKWJ0JZv2XVfH\nCaAmBjWg0GJlCPzwESKk92/N1Aars4cQ5EaPtcxo7ZhEoTkzsIJEWHHve+nz\n+eStq6gkJZa712g5drJlKTzPBbHT7leVinWt7lA6syyY1r5eSjTdo7UFnSwD\nuFPm81LKGqdZySxfVMr8JnoK2mx5HVzKXxuy8Iopf/sSjTWYSRax1gModnUW\n/bhJTJ0z61WUZQ90jSpyySyXc0Wf5A0V2DUnVUH6EuFlosE3jNkl2TqUdbsR\nCYN/0n4SVEWDCbBiuWf3RN7TvQ3WxfWjKBgrXINdS+DfXGzDkgrkyLY7QYtu\nJLK+1M7SNm1JJibdPkl3JDkOitdbMNIWK4cjNqNGuU2kyL8EziLyVqQoZM6p\nFFePV2kjtOmW1ufhng9ERnzS4m69P1HyMf+jGeOkNyyZrJzoRF6UrG/oRblQ\nGfg9Ud1z6z+FsbHOrES2L4K1n/uETI/mQhyLEJiQoYbIVVwerkOQAe0qSOzq\n4fzD6IT7kecNdVB4/dpol+oYeaadzdbylBS1udeTyJsG3Pctq9VIQoY4tj9X\nXH/hSdEwtbBwYOjXdZO6Kqzj6FfFoINN2gB3XdyS38mixCv2bly9Pgm2SUI+\nu9LbPhTFRDxULU7aU6NA1yMr/OLox8f0wwAZeer18hAeN3l7ISrtLdkOlEmq\nTeMf\r\n=BgKg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgTNKdNIoH5ZWlPcczcTXEjoX47ohCN3l70Sg2ZQykBAiEA8PAG1plilSOopifjUT1L8KYKMRTo/CGpJg65XUYRf5Y="}]},"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-snackbar_0.20.0-canary.65787913.0_1603133442298_0.04668643426663355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.5485fba3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/snackbar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-5Zn06gR19jEFW6dpe9W8a5TdOIqI4Z2twDXGlHOssBQ8cZHJCdnbvwcRA+ziog0xD5rCeKQfm3FhH34DrejH3w==","shasum":"8accaba5723520b6e4849d8e45e309b86acec75d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.5485fba3.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgPwCRA9TVsSAnZWagAAFU8P/iufpssvmGdLr3EBzPCp\nmY7SRad6rko8SJ64T7LQecf8CXtM9HgbUnZBLAXl6KF56Bwxppvo5+I7Qpmc\nz1Pp6MOGiPeIVz+uaGdp9Rq5VRUSm88L12/Wa1zJAGpC7lwcgdfixSeoa+tA\nSqd17gfPt76MA4Y7zHS0foNySV5FAGZvCvrQMR8znWtVHYbYAVQmHDU6NITr\niANdH2w85K0tZNS4f9x6pJz40KKqD43TbRGVTcG/b581boVU8BLScTuCODS+\nleUL/u3Ee5jfsHqyOuCYj/2O073+52RMajh+49Oy5B9AQkTbJf9pwnf8xVyO\nE+l1J8kCxl7htELHW3QfoLLhwAARqUMiUVgO5AOe0aRl2YkJKW1Wxqa0thce\nRgL5a+XdWQv3MhCvGvSNcTuQzIhj3xHQOtN4ftq8k2fjh+VyANW/UdRVTB8n\ng/kr8HcEt1eGhdVhIlDUxL+LlLcsSjiO3gKIl95ET6GeCn0iV6uOlBZKX4JR\nofPWfHVdQQavp6CRmb5QCHMVzf28S1dcBzLvIvmofqqQJklV4m3YjdmBWQb5\nA6eFHrOqaYvoRed9eeGw1GiLsfkVUZCF+xJTi4oLeo4Dw98TNmaHp4HcWmKk\ne++l2tE0jg1vSsJilnP/kDGLqKu9gq4m05CKE7yJkyZflGtYz5/ITz/j1kr3\nd3G/\r\n=DGgz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTLm50vUGi6Hn3WpYYUGQ7dxO6N7VSUcNiIXCp+1AiVQIgMrjkLjkJoX0KczsKBQFFYSA+BhzVZdRJeYXEsbxG0A0="}]},"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-snackbar_0.20.0-canary.5485fba3.0_1603142639711_0.3616452442263385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.a39d0a92.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/snackbar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ysbgQJ0HTn39XDjcQpV2K2iHOQECrW7+hRamies5oQAgYCp00NI0lkmTRlAeV00UdGgvV3wTSD2z+Ou6StW+cg==","shasum":"d97ea94330ddecb7ab6b0853f25d605500e4ef31","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.a39d0a92.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0naCRA9TVsSAnZWagAAje8P/igIsLRvzyBqc+uPtu0f\n+qXEUczwsXKjsRfbVR5GHp/YQnOsgK7iByuirrASFPAm8Vj1/xkEw6aeaOKm\nJVQKmKBWzUNwxrKSx3MA+z1eLi96u2mQqFIiQ85a5nh5yRTBcSYCeHSzmob7\nUBTxdGTLjaHXNzF6U4kCreXK5Brg4JfSwBYSFHUTvgi1LMsL6maMS4kZItcZ\nlU852zxI/Jsxd+gXaokRfOYPVkYlEBKnnyP4N9fCISqoZNh5kTkl3c2WiDRs\nwEZ/B9HVvjOg9WVUr/vrVaPMo0J05uUdb8E3a41jHM7U+SzUJFJ+GRuUzeYo\ndmRxulhY+EFKwmPSirIVKA5xIeyb2rQAQ+rxPgQHgjFiMUKLv1VrDNhzW1qO\nYJVCSecY66xtYKIY/DlNtFGLhzFvws2C37inTbOcENzyTz55uQ0iN3rXnLci\nOeFAa/l0CXjJXOfk5OG6Ooi8YrJh2Jp2kfx8a4KcY/x4V7NG0vPaLbzYy55d\npO50+BnmvmMtEhTrID3woL2nK+S98G2A5VFGP2K0+36jNyy2gZOrj2NgvOQ0\nh/RbQWDBAtaxkxiDldQc3HtONfzSxWswqBdUBbhjUHsE54+7wU449tVPbnkM\niD3euywnKxi0wnH/GrqINpKIFgQs4MKHwMSIVxmzslYSJcdecHg4NlNfklha\nOLUY\r\n=5jGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbQrG7rG6qiTXwF3KCZ/Wi8ExWDfANsE4S7US1I1o6eQIhAIjf23F0lIyZw0CjZ/Y2LyCCEx/ghJKFY7npUO4SGQgJ"}]},"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-snackbar_0.20.0-canary.a39d0a92.0_1603488218392_0.4815998093910894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/snackbar":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.ccc64eea3.0","@material/rtl":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ekYDuuyE5TNeFE61jUBZqonb9m4rHcsj+B7eu2BLXrws6eOLwFy6LL6V4q2qaURTv48NiYPuy9LN4/qOYpE5LA==","shasum":"cf71e8571c8f44f885cdf726a23659582855f08f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.4eafcbc1.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3XwCRA9TVsSAnZWagAAyw4P/Ao1OnuT401hEnBky1UU\nPpwGreBFqG7lJxiBKyD/7y9XmzvbHBwQkdVnxvUvVUpJw0W+WDEoKF69eX99\nV4L+WXW4PKB9T39HhKGZk46mU71HmS7kPaRInUdSchydZJDr+diciBM1LP6J\niI8u8Cwco/QU3Q+IVOrccYymapBw6dJRq+46gtuJcbj0XdUFe1LS+nRCMLeu\n6vFLvlVpxbOSUW6+Ngxa7Ob0N+UCNHfcC/yRknEnmJWGcIBObYjZasN7Owd4\n0jNn9N80mNR7h3J4A4FXqgYqoJ6MW8v/9KWPYKMl1CT+lv1+CbduyB7x4F70\nAHLsMcmnCzkCCTU7/SMd+GfykWNJATN+QS7GwphXDaltTf4+U14C+8Y35ueq\nSLrc4usIWxLEwSYwThWTwFUwv2gzEWwyszmMan/z5j6Ujcri8tPX1/SwcNrC\nx1A0/qPOHcfVKeO+fVAIojZFdWVqilcXI9L5B//iOutNUMaUHItbTJFFY5zq\n/Tc2LdsrVLTA9YW9oUpb/BN+ZZSel2ZP9etNcHGHoFQYsN36mJbw4D2ibFZy\n/F/XKCNZvmndFLIr7N7xh0gNNRbT5nbyg95NKHsD7zfK73N+D1ixC7Wqkdr3\nGBcMfAHNs7tY7+aLHvGoLc2vV69bXVIk23MFEN+mfqymU8XWuSMAjp5WrQCy\nXg7Q\r\n=2MTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhv6b3vvZi1UDoaLsIo0fAQC15V5AVsQGNJig9tiIxRwIhAKyPjXAGuASuMXh9GxhB0PasCq5qbMTNkbpDdY0Xbtr2"}]},"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-snackbar_0.20.0-canary.4eafcbc1.0_1603761647725_0.7586090075535454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.32961593.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/snackbar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Fgs/CmnzLDJjdwgxD3u04aSPRBBUtOC1tZ6ZpJW4/DFJ6dWoi+CoUU0ZFU1baNp35kSmZuac0F/bSZjDFoHNfA==","shasum":"bcfd5bd9727a0c6f7f0df2bf8dc7d7fd3bbf33eb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.32961593.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2cCRA9TVsSAnZWagAAafQP/2kpiXC4hYmVNPag3aFJ\nGheMXG0tXpyQwxVtMQKjHzaGnW2tMdlYWNIEF9iG3tvTrkuEeZxpk94n+bNX\nOL5UbzcjRf6B94TS9Zt6lH41GFHk3cBbuWLRg++uuqh7siD5OulPKLTMiBtq\ngXzSkfwTxF7TF3n1E+bPL8teyVURr8xVbHcFWWQgbe6DJhROIFVuTGLiYHQa\nxLYMeCzFHDPWbI8BfkMsre5QhJUGS6o8AffgwcVGGqiLB3yl9VCADbspHCLy\nFXfQojZMMNCmSMJGREpNmBuvqKcvUDh2Udh+BE4rAemoDAX3jyWJepQOi1+e\nzAbaf9BUHmU8ndPegparKK5nOYhWdkdrxgxARkcD4/IyTQsp/RItSVZtbydM\nDFAiQ7bDoYdi8PFmgJr/3qO8/kpTnYHYgatl7VOFrqktV356DY9OPOTYUHiS\nr+cLpNA8WBRIjmGfzlVs78CBCLbJSOIVq+1qtIbA8bh//2pgant63ePPPLu0\nnGcPkdjsX067IuHVIAzi9/WgClQwWcyPSIMlkVeSpykGucQzvY3yjClY8ZuY\nBSrAcCgErC5BZCzounBwZPc2AE29pzZ2Yu4C01SsYbkj7wpqNVlgA1tkTHNf\nb5zb1UuAAyOodYHBcVRGtCFv+rMYUikfBr4SSaWphqHNy+zmAasAL/1dqz+8\ncge2\r\n=vdB2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA5OpG0esVy0i6p3cCAv5Ed61NOZPiFdg5urQmTSsYkQIhALk7eZlTGcxtcfh1AxvNqPQ/GU+36ePboCSRWF0wcziy"}]},"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-snackbar_0.20.0-canary.32961593.0_1603845531825_0.9473201178910315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.8e3a0601.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/snackbar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fSL/i8AKivDngqWGyuKaXf7JVcfNR05wpLvWey+gJikznAJR65PpnPqvzD2AfdjUdWq0AZUFPTGfdVfK98Inwg==","shasum":"cbe294e4befee0bd242466f3ad9671eb57a175be","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.8e3a0601.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzXrCRA9TVsSAnZWagAAr4MP/Rs5oGD8mS+4lAzYYoLW\nCas//bY3oSgkRRpAgIZVUoVLD/15UhjKMm33MLa+RhsjXkp/389S6h4i/dn/\nOdNFxtcV+dGI4VS9dDUzsBcUFa10/7BbYsI7DEjrNrd8UcP7JaeB+gNAJNW1\n6nTVJOr4K/Ih/VMLOSrYz/kBco8e4KA8FY7+Dd0tbgwlKap6n6AKhfLlVJyO\n3q6WxqCLNFoP1AW88a3RsgEW2nXYZVEBjmVWNn67OS8dUlhehfJqHLRmKFcv\nX9IP6D+Gi74TJEXVAF9CdHIzgdrnmlnEL9+MA4qejClgSHfkuLws7F3Tho+S\n0fa2h7ZVe+Oaq1n8rzLqQnyrl5q83WuTftHt2DTHItHPiyBfGvup/ex+0tOS\nQxYxH8Ymkx/ahstavTnArgFPQtGmyCSGo7kHOSH+Q/avWtS2kBYwoqofXkLT\n9/q9b6zZ4NAiFvnJFel7QiG6ean7YM8Yv+10+UTzrgnIlBDPYDRzUIruLCX7\nVepT3rzuzDzZ8R+9vRg8NZfLx2avYg4lhKubdBTR81YlBbYKcbrpJuh/7ZiL\nCugKJOYXt9QSl1TUqMnF1wEaMXyxzh3twrjOemXc0XZMh7zPR7fgT842j8X0\nWu4Nq21O5lbC2lTDGQ8EjGtW6ktotk1gTToLj0DzEBbZ3Uy1G68XMWbyajQv\neBNW\r\n=36h/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDeH/eorjePbqld3XBNYN5ltJ6NeLz6jSpxs8DfHKc0qAiApHp1XRWNHkvGrkEhDhau7UuVsPMoqez5bmuzVTMJJmQ=="}]},"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-snackbar_0.20.0-canary.8e3a0601.0_1604007403421_0.8235542712384913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.178c25b4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/snackbar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-TByfRE61tWpMzpbFFeYn29taIe+XQR1vwO5e8YAdlEeJBTdLF7pCul7DQVb4KVvbOZ1XnDObIZqePCRIfddw2Q==","shasum":"abc36615a3a544884b1c9fb856e34a685a42abab","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.178c25b4.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzkZCRA9TVsSAnZWagAAUT0P/iMK39sGTcZrDN+FbEzt\nDz/auwlwEgUvolyVb9enC3gYoQzO45ci7MJWhrsGj1O1vE4mOmPPU3moMXZ0\nkTNys17W04/swcM9adS4IqxwzJSSLXpNg8cyOeO9HZid7WTlG9hwQwrbNj/v\nRDPmQY6MLfMixdChTMJX2XjKwfQ+01w/ZDGYCWgfjYB0JxfPgtiC46e9x/qF\nyuajLx9ZUEX83zTd7mvICD110rojwfeVke3CnCnZ9zHbIgle+HIsFUrL0mTS\n1Dep39c0KczpPF+Wj1tSgWK/P+SsLbc8+mRNUDBEafHAkmlYTwGFGZ6la3x7\nK5Hv5ySmGd1q4ylVBpMKJQJjM4PosZk+X/jMQEB4eTnDah3O190YlcWpjM2b\nbkh7H4QDIqKFgnoyhUYcHQraIx6M44VzLAJZcATV4LgCxs4IPoMKri4gcnP2\nCttmcBzSJzRAfw+3E71fTETBCWiwMRW5DNojMz50RPfwPLgw8unv0Kr2aixE\nCBMSnuHDo7ru6fkGEyd1o2QCAP8LTmgHa4CmgHS26kLqBXJpz3fYDi8CoN9Y\nZoohAd3q1pncpJpwQpjnNk/qwFAFCOMjc4fLQ10I+kkUvw/Sh/pkWFOWWO2r\n20Vwt0rUjrtHLETe1jOodh41tjJlj4n7j4kuAxyH9C6iB8cwgPEf36mzEO98\nt69I\r\n=3x18\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2TRHUWKqu/H9zzpg02MaiviI+g11HNfGz6Z+6hQrmcwIhANcC5dt+MpPq+q1o4Zx8tcSyh8lspkIj5BMEftqZ7m90"}]},"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-snackbar_0.20.0-canary.178c25b4.0_1604008216576_0.3318417183844946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.124beb49.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/snackbar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vs7YeP214k/C25Q66GL8Ndsy1rdTdtpG/SCBYEpCsPZD6ktQ14kzLq3NLcXCpdb2p5WgQBZKQLN63LekoXpH4Q==","shasum":"24edb808b248fe90fb17d02e2a1a2c5ec1f36bbe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.124beb49.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKp/CRA9TVsSAnZWagAAo90P/1wFrl4Vrr9DFrLSzja/\n+mG3/axr8ziDnl+C8tcdkR3+fwcLHBoZbGUsEI5b10yoV5n7GAbF3SRiv3k2\nYfmusfc16hTzahnuvA0X8QvdvalkYp0RmhP2flntC60gI2DDdgCaIOoA1zxN\nA/biYhwFI+zILcSG8WSmysTRJLB6nnjtBaKXNVIIb485awTLZ5YqjgiKPWhl\nlyGVgFRwhBJYEo64SsVASsSGZAxvwPWdzI993Z5+KuPZ295aqJvX03yoBuTo\nGHBeBbAES/uxWKrXIWuWjghlkZJH04lfN5/0MQOeI2oy1ZupA913bMqZC8L1\njSOpWBqDFzpHfKr/vn3+v0H8EocuT6NoVZi/bVeTXokXVg7lWEDSz1JMmCPl\n7mZky4LO1IojYpsyNk18fpQs4UWk84Ls+WvUtHzsWFhEk3hoNaPj788vUTAP\nHxdrN3Kh1aM/T3rY8tQKZ7g+pEcWBUJywD9o5VCy/udccSAOO1XCYCdq+Q0D\n+8KHUFbnX6kcgsn2UgzQFZqb/R6LHCRSEWsVLbyvOKbcrhO8PWAbB0vEwMhB\n3xSz4/uG4FF2EKxW2KYK8wxb+NrxyGPQFRZPsH9l/vN3h8jVhYnxsTi6ttPV\nCzrhzKyWi3gIJfbdoqsPzYG3ocqGLxQqWcEx3HJwdvX25HCnuxaAXekuQaD3\nj0dt\r\n=m+ZN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTXzGOBzHNWj5lFlsGhFnNfnXE3MbM0fxZnyogGMNKtQIgeJc61zRh2QyJAPaY2/ptEyjEybfrRpFXiaXZT31CAqY="}]},"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-snackbar_0.20.0-canary.124beb49.0_1604102782886_0.4338288931717129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.5937f468.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/snackbar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-50Plzn3NSFH9L9YyYyLiNxNop3C1+8jHog3/jg0RJVgs1XjgphdMFdbWabg4+Ey1x5EKK9aOqKXAFTRobyJeWw==","shasum":"ed82fdb5e2f160bb65c8dc5fb09241e55e39278a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.5937f468.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxeRCRA9TVsSAnZWagAAohoQAJBgMZw3kSP65Q/zkKVV\nTv9Y9AgRzrkI/QYzXcfgx9rv3XtEj8poFqv+pj820y2CvHy4RHW+89gT/vZZ\nmhB9irxtNVmIEc6cZb+t0b8EN+U0Z9j0Xm6kYjk3hC7D/dNyV3Ec/q3ZExD4\nSZm4joXbdBf8MVYvWrgYIVNxN+0qtuzgGhY8X8TAZ3m5UWE2+gFXa/Zyvev2\nBblKZHONTviCrrxSuHqVoRBx1G3cf5CapkRVNcKinnQwq06I+Usg2DSadPUP\ndvjqmNKrFRTbdbAaktZbBWPSsjJh1aQNEgnH5sfYkDVZc4kt6QI4EA/uHkRo\nd7HU/iT1cNCYQDa4lPn2PovUwJd/HX+uDxYUnJH+x11yXa0cxRZUV7pLVGfw\nyixxyemk7baNiDI1U+ClvuE5DxLIi7H9cDAJVpVNA0k0UcsurcBscBzk92ei\nnvhKNgHDfSHuaQqmeRx20NdBg85Vty+rUJoO2TlUYJU8SVqQRrFFHPC4umlO\ni7GtBMMT5XyFGAndnkqFhrgoN/jCqApRIq/FDqBIDqBKBz7tOw/Y2kthn1yI\nwoawKnfEve/4P6stQNjIouepplPRwk8Yt9+N6O1v/I6IOpPDdVWMUdACYpxT\nWvoWcpHzQ7dXQwQq5OxPzqea7/9fMb7nN9la8Hyoad6w43Iv7GwSUsdbfsc6\n0Qtm\r\n=qmXW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBo+IBVTx0sw7gm/qHDRXkh3LBvHPMkcaVCIdc+TfvzwIhAKcdfHjRir6Ff8eYgJEXDc3RmmlWV599LAruDPhzxxhI"}]},"_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-snackbar_0.20.0-canary.5937f468.0_1604523921025_0.7052159690753304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.a9bafaee.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/snackbar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3u8+IYBEnV206h5KGK8TTi0NldWG39e508rdKRvqNzUzVv0TKZzMM+W3WP0FI8gF+hc0X40EGEM3WI5lfvQUBQ==","shasum":"0b7f365b7a70dbdeb5e5efdc890dbed07549a6ee","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.a9bafaee.0.tgz","fileCount":16,"unpackedSize":65974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0MCRA9TVsSAnZWagAAHDEP/jYSQcwjvkfUtD+wKXhm\nm9qjSFxhKBxlw6NJJR08e2J1AZ9V7KjQicj23qP2WMqqWY7kDQRZmj52IuHZ\nUGhUw7YShMECEbZbt2q9FDBb6rMszRU0bqhug0GYohFxHEflsL9ArUqtWb6C\nJTwUd3r9wt3PoZ0OALPIhrtLDQd5x7Vyc6J57KR0JjEUEGPqZnMldy1Ize2A\n9fmNOpqROdUZ3Yw0HzkHF8w4+53/X6Iw2TktlOgbZpcx3HvltME4+G4d+4kz\npfWWMnV+Jq/ds56zUbx90zvnN19OPVzEAJAVu6Oa/LEuDh7qrpVH4ec4uPlf\nuC8ViTwkg/kDfY+6jriUoX16wQ9WFiNS2z12wehbcKl4kxHKS15+uooz0J7b\nk7IPgM0y+lZWI8/R383Lqe0HPA3qBCrXORhd9PDUsXSKvUgW0AEZQPjSWgWn\n98yzyEMSu2w6wjY81mlT0WlSJfEewbHvuaG9/EoghwpP7kSgpwqeDjwmgFVM\nDBO14aE/SY6rxnDIrHP4YR0d6kDYnkTBwsMa+8i68nMzO/+QRkbdydmIIzQ7\nRd7A4vTKTACA6mDnf6GSonTk0kFl3RKR+M3z0MBiJPO+eG5bCTPLp6Q9tiT0\nQgYMwbV7/S/HTpZxBMGNCIWzrLlBYHnPwdwm/2HzkH77HG38p9KHaw7ytEZy\nc+D5\r\n=DDfv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHu2atcSx4MKFR2W+paMYsPfdKnambOREalYlN44fwRPAiADGccA+zSJaIC7/du+PgS00I8SXXOsN5Qgc6G/SFvXFQ=="}]},"_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-snackbar_0.20.0-canary.a9bafaee.0_1604615436307_0.5859446349855357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.184861ee.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/snackbar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mDURlRKdUhO9YEcqX4g+0YpsqaD6rptapDiR0irfLdbRGhhZUdiZ0WFmxXZanXU/JZviKAOaAOn1g09oLxkvkw==","shasum":"306b8039c5395254e5d75b658f990d089a19a604","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.184861ee.0.tgz","fileCount":16,"unpackedSize":67132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexKCRA9TVsSAnZWagAAdikP/jJwcbbxYLeEzFgne+Qw\nPWln9FLKxBJzkgrqBgmgUhJj4Y0/+d75aahbpE5X/pY7iQbS4Xv6ZpJzKc/G\nyblrALxY8LzcD/5Rdr84ahsQ/q3FXo3k0FS+45MA0pQYOzvdL9Bsjj8PoG91\nqmXgCbejrdWg+uXaYc9vfBPfgOnhQm8P0nS9jlYv8JhzHRUYKuValByuukJ1\nnEskbv42AqLk+rK+1hdzY1ubxK9PMuu66F6SzYJ9IBx0mnsMepvIfZWQs67l\nCuJxAUB8Z0KXZQejpsN0e++uSn5N1ccVYr9oUFc6nZs55wLOipGxKftZpsae\npduHuab3HRKlAtmeauopWySwaKhXOu1TkDyii6D6JeUYHn2yE6P21Fqbkg8I\nQse8V7r6TStJMuYZ5YvqkZ7Z9jkEt+AArLGavpPHKH5eAk69MLPCOgQhTNse\niOjkRFbeHzYyCC0j7dlHePE9Cz4Sa7dgEENKsLQ3zXx4DVlqRlT8+fGWBi7p\n5U0yUy1Z0bx5MJ13xlEOR6RvC+0Yr2PgbkzOLUv8fqnyK9SJiwwzL5CaTkj1\ntffg/sMr5AhzyH3zRs+3XSwFX4PYqEa9JmaFOwH8aLWL7oRVn/IyMq4B4lmi\nV7rsz2wI1zxy4tsfXrhOGyxXT2bUuBqHq9yZIF/wHCbjgj5fmqzwS6O74oty\nfer+\r\n=eUZM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP+eSn+joR7MMJtYoN605cIOChw3+CYdrr9exXv/D8OQIhAOftTjcSKWPtvY93U2io2DSnFnT0EZmEnnSQJ908/bqi"}]},"_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-snackbar_0.20.0-canary.184861ee.0_1604709450067_0.45708390456735604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/snackbar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-okTO3KqcGy/h/ybC6AJW41g7qcVUlWkc6YXPn+6dyXYRHw54vl6leqXStKCwwZlu9KPohzqNMQ7GtqVHrVEGvQ==","shasum":"93e751fdde70fcb4b8421d1e4d3eb73996d901a1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":16,"unpackedSize":67132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6gCRA9TVsSAnZWagAAV7wP/0PjTiAo7rQpueNZ/M/N\nDvRJE0bpBrKARBCW/gEOQ1rvGNkSl3ZACLgmbhnxTqDO9QI1DHUSUuf83exX\nR8t7nYGkGIfZoO5IXAZ1QVDyot1TaAXyuCM6K9d3780rClfLZBYtzu6edwba\na5Ui7SuPvGfXHiaT5dvOHiK7HTQmATWkrdcJ74p6sXcGBx0AjBfsReZ/JmdM\nfGEfMyGk8aXN3k/L08MFwIYUrO2x3UmC5gTt4RxZJgHJSr2N3Xb3vn15d2O6\ngM0Amh+FF62Z9i21Sv1jkzkfpUhTX45DWX6bY1O7zZVJmiPRb4mT4iR88SMc\nW1hbDxoFNrA8/xIa1TaX9axWJZ2roE99Ds+UhtroiJih+7L2QqQs4K67AWme\nMVqQ+EWKhrg3flIfnR2VyQefM1F4u2BATBqu6K094u6yHyTREOu7oAtjMBH2\nqdlN7OulBu+PMSthxVITqFVgw6DhnJvAYbYrDNMSC4Dj4SmQ6AIE1NJGoyTj\nWwomqSzC23mB6QGGg1ihSwiEurY1Zg6aBFfYzzfz3IFnbWFLz6ng4OSdfMvj\n4SoKVDSJry3+3jy4U0wQ/YFrrLyhkdUNA+xyZmtfz0BNZ/vxn1oxwUbX6Ueq\nSQP8Q8eh0rDx9hVUQvqiFpDqDYqcqHJJAQHN5nqHQZCc+1zV/Saf804m6sKh\nqUIS\r\n=AuhM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD8AHYXjpW9cegtG/j4pboC4VKLU/mafyJ2clZ1eYS9wIgAYvKX7EwMqNhjPM2wibOBP9bWT5u9FVFSnv/JznEk4w="}]},"_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-snackbar_0.20.0-canary.6c6ae2d6.0_1604927136184_0.026708382679515807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.ea2aa477.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/snackbar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NHs6BV4IjLsnMd8MmM/VahueTEqn2ZJqXbt8aJAIEmbDxJtZjSy+e6VDSNj8BbOwBgIb6mpFYcZie32O7GDfHQ==","shasum":"ff8384dd592315c72078a444918854ece6b1cf18","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.ea2aa477.0.tgz","fileCount":16,"unpackedSize":67132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdd3CRA9TVsSAnZWagAAf64P/Rcg5FXFcw/rdvL2prrZ\noCt7S5ttw9FEej9qyPTlaEs89yv04a+g7yE1QPUABnjqkskERM+qH1GPtI8C\nfDrft7ja6+Aiah8+RbO6nJ7l3IbRWDvTd3zcxmBvACp4T+Ns7wuH1WZC3YeO\n8rFpvuWPU9H7j0d9wvl1qYP7Fel+1tX9C0LqHPgOeJ5JjioS8BwpNL/x1uis\nx5yoIp6btnNrbczS5pDyfhXMkjdiJ8kKLLXYbW+7QLqeHF5altjrVEWynKiz\nPwQ7g9wyqmO7rZg7e43q9mo2pHPv/M+/LCBlC+SqcaXzO1bRfpRsgVB6XqNp\nqQYRJanXugpQ+weNwFELhWnl83wtCEmLu4pq5gYpFUNKIDGACgHeLctx5Sle\nYkCTXwtg/YjB8yP4nb2bcipQI2mWNKAi9s1GjdPQ7rSPNy1cp/a/APGXw7qi\ncVOopcwmgNf0EJ5ZyXEQ/D16bQ4lfVieuehovf13RYX5EiNjpAkJ66xO2lew\nZD7XavJVgwClV5Y08Std1zQGB7h+tPYm9zvTtH2dMXkHObs/IH72/g7/thFI\nHqNu7rsb7HE4EJu1FcqMcCI+0g0HlopnKGcpf0Gz2c5OUJOKInjalINezBZf\niCZ9duaGe41Md69sA2G31vo4hT+3s0MuClvTzeAFqbeVSXVmbfgbRUNUpo3D\nHtHH\r\n=DBb2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV6wrYncliNKC6xCQK2XfSS6U9IHkPOT4YsgwaF35LVgIhAMtH3wWLwMGazcGxaeMGC7SOETXWU/Yc12+99zylOgkG"}]},"_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-snackbar_0.20.0-canary.ea2aa477.0_1604966257920_0.6419510653790728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.a2c088dc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/snackbar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XL0Afe/w1s35MAvukTnua5yjziDpwFejGFRyqvwTHoCiUTPeuTi12hExdYhGutD93p0vshZ+baGC0qnYB0aFWw==","shasum":"f4d198215eac9a3c1dfbeebde8619648cbf4f8dd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.a2c088dc.0.tgz","fileCount":16,"unpackedSize":67132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqJ3CRA9TVsSAnZWagAAye0P/iiko1sO6qtUyVvfi+KU\npej9pmjjxNKWttdtEvMGI8FYWwBgNSGSC7gEKC1yuQz5P59sVEG3XCdrYaMu\nkQw1goQz7tgEzrAxZpWBR5ef+ddhbSTEPvuOGjdBPJ54GJpwBJ5Dly/le8r1\nYgBVDCpM6SVdaR6N0x57rTVIYBYxCwRYL8RM3cxbxh2V/XzyYgO1Tg3e6NWr\n5LdSRGqu5GmYgYQAA231wI933i+QXLHuFt6PppvKx2E6aJbF8ARYhKQpfguT\nahnnHhytu/Dsdit/Udng5Qx8GsvBuN3QUkVXw+H3K4wce6DtLQa73bd2Pf/K\n8UHQNilt+wS6cd0+5pWFYDMEnAbcPh3B0JHSpuUwm3KWkYd2eHwjTqImOPB3\nCpngaPICVYwXichsEfKq13dYrPdRAYA4j2PTZtssgNaOaMesKQGsdmKlk+a5\nI3plmIV6RnsDYBZ+wxKX0EaUcio3a5FUdNBzVIpNk4YuGRU2fxZZ9WoG+jI9\nHiaTK7u5I0/ayYZIBGuC2rPFXdCiN9woLTE1Yl/LVDhPZEAj1g6JhYE4rOXA\nslriqjDwhO42EnfLLm7iptPo/A1zUZEXJXP5LWkYl6bJDi5jybREoOThX+wI\nSnYeVkl8ug0LyupWngs4gdh/+ZwOyjLx83DxbRDBXorNpcEFyjqksZhdCReS\nTM9h\r\n=TBsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG50jCh1dk2EuGX6ysm3W0ONyOAP7XllT0ur4Tro8sfNAiA49NFLrf1mpRP2ugxO/zGO6tTgM8+yAP9M3YSjNxocUA=="}]},"_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-snackbar_0.20.0-canary.a2c088dc.0_1605018231372_0.7482586483168019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.b04d71d4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/snackbar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f05U2GhXuJXl0zLwwBAwoE5+h4MO+aQIqXeefZbBp45yOCLLvd5ZyZXLiGMOKTb1r0fEAL4TnuIJL0xaygVufQ==","shasum":"6c6d56e11bd30568b9f7298fb3a78bca93afa020","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.b04d71d4.0.tgz","fileCount":16,"unpackedSize":67132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRFtCRA9TVsSAnZWagAASD8P/i4dChRWlQQNwLbq0MqP\nZgHBDh6FGMIpk1bblEbVC2PoFcKRtIC957KuMN2ExIxjQI9VJBj0PVX4Ks0i\nUShR2vRJLOP5YbsiSU4im04++BisUGFtDgbYlu9TK0M4EKd/DV7eMc9cH+YP\nCqG98NVVpVXWHwouU2t4EOP+nadXLEEDbKlP5QsoFIlE3h29MhQJgLa+q6CL\nvlZXRCgM2+kLuxVaWa04IuHvHumOIDY8pVElhue16Yk0U+W3lG3d96ymHe8u\nyZ7DFXtPSRCoKo84GtAHhJzOwBBx0Z2MQsEkxxBBFDTVW0pjfLUQqzpjxRyS\nrTGhqNwP1ddhctWIxj3e3hIm2MtgjgDueuSORNBOa3vWcnI+9x9+DFjVI75e\nUihxVbrxreIXYDMvkogkPzv872vKGq4rpdI/ODyM+XssdbGC8hu36cakZEML\nUDNtvLhULlldGC5qS88V2wyf7ivyHpbmaoFMVDeE4KBW1Q1uy+PppUdL6j60\nOKEpPuJmiWmImlXFcmC0AfY/btMWD1x+pbQ0eWAzMKCJRFarLfWUaTzKbVTf\nbZfaBeWxnhZ9UFYaUpXxeedMH0dTIKvU1DftjopzSvYUSYfNa44V+mtzJE+Q\nQ+VMa1ocsDQ42xpg84pxnlgtoublWaEn8lRqV+ESGo2RvBtigBTfPPV6J7Wz\nXRdj\r\n=AECs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEDg7ol/59ZnGtSbYivrnYFGO16Q2wRQGdG81umqConAiEAlbJhtkDkcE92hcIEu+2xpvtFMwNB32Sm3PMNlcA1G1c="}]},"_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-snackbar_0.20.0-canary.b04d71d4.0_1605177709245_0.60928410868844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.2c553352.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/snackbar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.b39094d14.0","@material/rtl":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+DAKYrZePbW9BXXmO5kPLhp0AxHob+0ZJyiD7DY9Wm13svaCbhxvvX38z0eaeXa1MAxDXuARKgC5EMxCA94g5Q==","shasum":"0be1bfe84c4085779d16f354fc26e9ef5f2e81d4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.2c553352.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpWCRA9TVsSAnZWagAA+X0P/3iu46rSDgRmqODVrHwH\npDUvH7P8/VlaMCP588O86ai1vB01s2jNJgvrBl23U3gjIlaGGO9x5R2nMPvf\n+P82Q5r/LmsGUED0t4YDHKkUYeOr4LbmHSEB+K7nkCYS6SHNC18i2B0r1umS\nTy0fg3cqnWLI+9o+bY0KZ5b47wkY0tnOhxC87e4xL5BUaVXnKJN9eSzdcWPC\ngj4cDIL8nlInSY3KRmFVEd4Opt13C+2FEy405AcAw6xDseetzot1FlraHUi9\nFinDRAbBjvKePaHp7LMLjO+yKRbwAZ6TAx4VlbSZbN0e6zSTObCVEVALxQPq\nEsANBQOahNza6Qk/CVPHdMPrR4ZPcyEdxoAI9TtwpzzHqPAZW3maUawhTIjb\niywPJ08jss7tdzMn0BnshKDNut24lw7AA9DJZLEW/8l2yKUL4qR5xycv8Z8v\ngp+Txdete9H2LTz5DUj3x0Nd1/NI8MO1hgvqoVKznKoZdsKjNAlCrh7e+Hwv\nR2Dq+28Ha+egIkYy/Z4u3WcwkKdWSxkifNsoJ7lfec/YcFwRWmGBXev+QVFE\n3WVxK2s7hlK5lZGYmI+TU8skVztrZLNnpva4FHTwnwgD1ED2sz1N+zaAKXHp\nsZWcqQitImUc1O3OxAHESV/QaOSjkl4E+RzWk3oACSh+P85I3l9T35Eiu+ja\n1pSX\r\n=hyWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsNHLtbDsjbYRaZPr0w3DV02TkHrGQ3ZFWIRtcdNOBEAiAiIjdRV6C7U4udSUNQp+cVa319fEmAA0dS47E1oqSjzg=="}]},"_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-snackbar_0.20.0-canary.2c553352.0_1605220949630_0.14927768806076736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.6560d19a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/snackbar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TDNODJiM1BkcqLDKVxgicRmMTds3Fe7S5k0bimwjWIiRyMno3yEayU9iKkUY4eZqoyV2aQQE+GOkBst4fdv3zA==","shasum":"8c5a9688117e30f51ebef9d4ab30109da8944fbd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.6560d19a.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEOCRA9TVsSAnZWagAAemsQAIDNZGc2PIatPdnxQUQU\n9CVU34JUnn0RCCUIDxYANgN+HPcJg4vrIeF0/33T+30Kxv9d7VfYQ7VEuCIx\nTu93mMRLGFZOssWcumoeM7oj/7D+lsrFbtkKORE1vxq93IzC0XRuJPsMF4k4\nz8K6qItgcqgMkfujhQfolVRMZTx33PjbL2QyoIZ/w9djT2yyEau52FZRSWv+\nwKIuwOH26ezvQa6iTWps4m8YwZovzNpuKaZbjMXxis4xOn7KHhE+oWGjPHJQ\nvdgW1qPCL1gpYn8hZ8dml1HFF99pM5dJsAsAKyLT+cw/uqeGSyPUWnE4x8nX\nByUbHe9a5XTM6VusWRytV6JBdV3nwQ4gScMUIGcjB8xCXUcmZNbB5wX7uyVz\nPmymMH6FXkLiRoaVdX0yeTt1BLYchmAb1e6odT4yzDBCtNpBXcWdeo2/rhvp\nUpdswA6RW7T5iRFt8mOorzg0dWIEfI54SdPqxC56h8h0UEr8ZVM34fcWHW+5\nPOrCtxk4KjuhjpSynjP4t1y9kCeE/vu2Qe/Ib4NGdh8FSmOiMM9LxIsJICPd\nLkbfVYtrPNcBMz1WqvA5wzBoHqh7+tS7Kl1shV6wur0809ICWbpgnSGVWu1s\nDZHiMHGqDvpEYeo7H2bHsUVYp2LF+ahQkbf0t03ap2FmA0xD72ZYVMSKy1qi\nTF0M\r\n=lDGe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0jKVvSBbb75DT5FyPakY7fzprukkVTP0epPD4qx5BwAiEA9mxg7BdvMXiyX30G1u2t8myDgiugA92hrehqSjyBBew="}]},"_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-snackbar_0.20.0-canary.6560d19a.0_1605300493721_0.10938410114887676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/snackbar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ro+jCNjpUo8euxb/jRz4QBWeIb4txCxi4aGv9jlGn17HbWocmquAWB+ZsIq0O9cjLm/DgQ4iHf9ays/PqUY3TQ==","shasum":"76d1db31d1391a2ff0c489d86ad326bd79dbb76b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.a28d5ec3.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+r+CRA9TVsSAnZWagAABZgP/29aXotmSuxnyWoAqeMD\ncnU0fcRimu+f7YJXPTYiH1lx+C2McX7zKICHj3/bTAgp5nOdZeeHhlulv+Ha\nReLVY5ZEoBSjesWN3q5XoM5DsNZn3xYDjno4R5fuTd64X/SgIttlSjwrnHn2\ncLYqJI1/uDoRvCu1ujdYBNUpMANHyo79eLTXZWiq1pctw3wGNr1MNrOv8MTd\nskteGRh6mYWbqwPWziamnLU5f1sALSruQrS6xyfF8Ne/6mzJUMBYEyu+/3Tf\nCZDAsV8rLGsDKfKcAM421pLvL1ktgIF1nIbWZW8sPL8/PfcmbBhOPtq3KS2V\nYBLy4rpAlreQ/bBJBRtPXSIhVHy95ZfZNc7jH11+2+BT2rW2JnL3HsrH1utu\nV5GzBscXPIief6gOSGfvmvHJN+PYyA8um8oSMcE34Y1/Vx6qzVkp03niFVN6\ngI04YnS8Bbw0xpu8CIAwoWfYVrI1A7y9fEKB5mYqsJsQQditTb50s0mGf3zW\nvmPtKgr4Eh5m1ZXU/OMzDlBSUEQCvBNnV7zi0nr1TXa1KuePIRdjXAV9+FCl\nhLzn0e+kWNZx8l5+xrQaE1Q5N1YmhWfs+32IcvwUxYIj9wwMExxWBtzQqi/3\n3YAuZskXn/SDrZqXaWrTfp9m3bUfTXU3QY7kJ93OT43Md7htlC1oAct1yCF8\nG59M\r\n=hH1Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7m5VwDWOPKlCR+gLWMIGEUlCDwcm8ZmLyjC9KIKfpBAiBEGDvnRyrXUXo2PnMIUc4MtJ32jLuTlNutOSeDSsuqlg=="}]},"_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-snackbar_0.20.0-canary.a28d5ec3.0_1605626622235_0.5436258697654084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.03e7e778.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/snackbar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FAhFrHCDHsr0DSCA4mp6cgPC76e4PfV5w594w/6LiVaSoxsc/A0dc2u131rX0btXBuJfh2wcqejzfDmelU1ZqQ==","shasum":"46fed36752c0caf265460ddd68c13743a24bd73b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.03e7e778.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCOjCRA9TVsSAnZWagAA9WoQAJJi0A9kQ8C4WJ9xmXcu\nwkQtLoUjfJwl7I+IvXj9pxf+9cbSiUUc1coQs2YrObAWs1IR9j9UX7GNawY5\naMcI1zLmq9ZEdI33XxmOOTY8dVo+CSo5vBtETBPqxPWwXRqyTqIfQ9B66w7K\nYX3FrOqjxzEl8wjdPhEVHqg+cfmvdfi+6Epsx+0ds5pC5Qp6mMrzoqTcO+HQ\nY0QrFdX2z3XV6r94vmpddK3Kmj71lJW6trXkh/XyAR0973fVve6RSt5jnt2k\n8vTkP6utPWjpDXzUTOL0lzV2GJb7+xsv9aGpgrAVi5OUZgnYtmUU6zl58Av7\ng28i9R6cyUUIhMdY/6J7pLbGooLtyrESMDuHVGfAUvdC2oGY0/gpaV2ozjAm\n9ARdD1+9ganlLjtaCWxvah5cLxdTMPJ+yNx/2Xh1fFtlPhSWkr0s/5qNhVPM\ndTjogTMe+CxqYAoQUq/d8NGRCo+3ZVN8ccLQvj3Ctd4ulDChYx7ZiTL1hKLT\nEyndfyDgfBKX1boSa3EA7FnmnJEWxF0tUMHbmJ9a7oIIpV50sXFL0RhopBPp\n+0XOuemCLsRQ8U0QWlkBVVUaXG+2PLH9CQjDMELwd9COAPgDlh7SQ6nhuuoe\nKMCYU8TSdT1124ldK17+jq2bRTEXCjq9HGcMd9n5auQBnjbzrJQDkYNhAXfb\ntJVd\r\n=Fdag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwc/l1qgFOwERuwkizLfAY0W36DTFE0cH4j5ZmoJ9CYAIgR4RLty3rGQi3/zqaOAX4byviNQa4LhTBWR4IDLEeRH0="}]},"_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-snackbar_0.20.0-canary.03e7e778.0_1605641123191_0.9533598260235128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.ac8ed597.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/snackbar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IokxaOToKBwS3YxmR2VsV8J+XXMtsj373wRCpz4V038Bm0yUoiG13nyuXXUzymt7Qow+WSNzw5p1451iMoMXJA==","shasum":"5f0c24c891d2509b92b7fe29335ed2f2a906b1b9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.ac8ed597.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqSCRA9TVsSAnZWagAA3rIP/2delmXNnMTsLjaUAmjZ\n6t2buRuHMjk8XBbk8Ku+fM3Hi+pHdpNRmXsUoyBryjQ3Ostmp9loUh+P3dUa\n1XOn+1XcsUKg0dEQ4mYIXHRD9aR59En+ms6UG7OswPgVp/C2/NoH+BaegIHI\nutYTiNpMW9B3tWjM7syZL4KP1+MaipKtrRHnjwaZvORzd1rJBOXCoo0fpSUE\nknSZvzgh5hA7saXFm1zstRS8ayJzdVpQqSABbIuuhVBBbMICm6C4MTk9gBwG\nPHiO0WptpQ+X28Pp3dCYJg/QRyvtK+NEQWXOkFLXkLqJg1CN8qBWtDPYtybr\nWfDQ1fib5wf9l5RlqECj559lUNZfqmMSZlnzBBooLZAhW+aMAqRl5ceQ6g0V\nuc6X7rKDhXDOq0g/WTWobXXvvEzReTolwg2TvqhZkTCmyv04wQKEgecmlS4c\ntAmKtEt4ZszBK5PNLkVXH+V8egZTkMj9OwaD7hcz8LpdlDGI+EmuYXimTv0R\nSyRAkQmOp2WUXIV0I2g1LfA6fPWPeKvBM2NeL0dB4HTQU0OiSE7t+swtK+JX\nQo/PoGDh5DkFbrX2vK2IoHWzXRhPHkS/dfUzMci3lp9jpu16C6ScydKwHsV8\nfEJu1B7Y2HqhG70xvbKogZOAWTooxk2YiLthR0ek+FsbEwiKKK/4JqSczLb1\nQsSZ\r\n=lJYX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwvxyaKorPZTJw2RCUQFx7gxR38wYwE+zmSak4i2Q0zwIhAKzbRrZlE6butFKBxZ63KvK7XKhSmeGXSfH/6T9geZXv"}]},"_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-snackbar_0.20.0-canary.ac8ed597.0_1605651090406_0.10343403661247708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.b6a60f60.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/snackbar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2OhvJVsJQ3BkwHjt+ucY6RIpKMe+bjSJJFMA1gHOGYAiSLIypXNU/B+hE0j9fizdw5B2iaBfW86t+nre1oLnXA==","shasum":"97cd2d6cac1064d2c1791c8ddf9d80c8a04e3362","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.b6a60f60.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQKCRA9TVsSAnZWagAA24cP/Ri/60CAHKeDPARjHnS/\nNxIQV7Edz1mAhQTJuRwKpBj83PnRRpYCDREA5mSIYLx4G+sfyYNj+Hp0Oa/C\n0TI1DXWWIG95APQJvcYT2kgCtCqzYvsuy3PkIYDWz+eqHCFe9PcWL80kzMnk\n2R1BEDin+0eiV/f/WjXKPXxjudohZIJX/68YM43XrcgAW807qSuGHg79ewpS\nGwUg8PWkZM6LDm9WCEkw2vJJn2/21eRjuff7HAzUDqm9FsO1qRLv8+3Oi0Li\nJAxrF5Uo1BViKUnYz2XJwrB8TxIRqTpforfUe3AOd4mjR76X6wEaFXN6Jppg\nBeVvzdpip0PNdOAb7Ho/pEDaOIsgwU+w/5F2PFVuQb24f4ro0q9we5tlJxJc\nVb4wM1wtS1K9wLyIY4eNeRlATWy23Sx6jVwWQBctQLi7kspNinALn3mP/IOr\np1ouLqn+OUPbcEF4RHE+3zqfqdOxLgUUGgD/D99CkNxpbQouoXLTgpsWOGgi\nl2DRWFpRzf4V7yi8hPUEpWTxQ1zwahfEg5tnvcAkaZP16fHXfB0mF92RSn+Q\nagZdrDdxoo+MYHX4gcD+R30bXAcyYgYSbZAIgtOJEDnJO7hnzETR7IDYFVQG\n/Tazlf7j9hFmPq4qPSbmYVJXvPQ0mqKip+4C3ECqqB4sW6y+yrTNytmWxdbu\nEJQX\r\n=tImC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS0a8X6C4MH0tGSYVGpivMQ1f3/433zChpd5096RodjQIgfhyzaA9HW3sTv4mgh/5CV0TJAgf0crbRQQkwTBN8oBw="}]},"_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-snackbar_0.20.0-canary.b6a60f60.0_1605653513922_0.8098275824380363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.71cc24fb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/snackbar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aQg3fcJP+vUho1PD7cBnXndA5Vp8fHAbT2XUYMWuTBRyJHZCkZeTy0yOhOoqZ79nJgCcQZgRnv/ytxJx3MPB6g==","shasum":"f0f7f146182ca7a7b9314de28f788b1ffa6ba20d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.71cc24fb.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnLCRA9TVsSAnZWagAARLYP/1odU1Wzca/0y0WJqbBO\nIF5ie2pNcLZhbyqNu4jeZRAWcUOD9uz8Lqrnad88KqUey15mWgNwl40qGkLx\nf7gvh4fQ9aLOQUgCV1u2VrbXtdejfWFX/liqKQyYzXfkmNjp1/Cy9gbklHXU\neCqMUVM67OLI3lKRGUmbn4l0X95gu7yOWGufMBQsCbhRQlS4Lv7KEHXHyTAu\nOuxyySG89ghYFLwyPCzrL5r/BX5W/RCLMfro8qCfZS0T3czs7vl+p0hzsv1G\ncoxOEU319uQ/UFMBS0q+G7VFfR19CdEpZ8Q34i6Bq0EcBFKqBfrBgNwH4qAL\nfiHzbIhqTPAIuotINwqbqnyDxHnrVBCrEDrQZG1bpsnsq7AwDWVHbHFv3rKA\nWVGADHrHG32/NaIn4s9Z8+UBIoh+C4DopKIQExDDSnulBeWCIkF5tjEfKaoV\nQEwTcsoOdJugKFJZ6XF5s/WYppC/q8AhwacyX6jY54ZfmnCMnuId0qcrlkDw\nIDYSV4vrRIr2OBAnUxIw2g0wT+hrj8T24aFAQS3LhIbi9/YuzyOAAlNwGoYp\nR6kbTEUKQXvamzuBQ2L65sAt2AYrMA+V9R+1BWrfxI/Kk835OHMKOjNyioq7\n0vpHYnan5yujJjBMwaUh1NbBgAKOIyhShsy9iqZuV72CdOk+clNDXlsXEm2t\nooXD\r\n=2yyb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsaAy7Jrcw0juG9hRQ6A+NwRTFdRPji5f3CDBlauSXMAiEA63za4ORX/BpkzypoKOXeP4PKEp5xvk9VsRwmhKxI6K0="}]},"_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-snackbar_0.20.0-canary.71cc24fb.0_1605654986932_0.7141328789781731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.761027ff.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/snackbar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.482ff9091.0","@material/rtl":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4Pt3xzdPrOBGIIf2wR9NsmO3gC71Jtt0Xi0Y1NTCmixUpEo5FJUACYBN8Ou9/2x0i5a/wZ8ahysJIzZeD6cGGQ==","shasum":"612b1f77dd03cac797bf3a3df8873128a1a3a24d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.761027ff.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZyWCRA9TVsSAnZWagAArtcQAJRF46OLMHwhPaSP5/tP\nQhbqQ3/VkGdk5MjcG5mDTnuA7/pQbW3Y8ZqQ5x1ROf7jqyD7d4r79v6Fo+i6\nMrCnMxvvNclQYacfL4UHyGFaiglrX27YLomjdF5cGPITOdFhBkzW321aG7Rc\nGDq0KAXebOHByKYtx/1eZ1BUaBUr2DLm9Y6XgJxhYRsQALiMG7JRkaf7KJw9\nX/hlia0yyHZQqlsei/SHkZMmYyf4Z3OFAnQw4f8AnHPgFOgxWIiGw3E5Lssl\nmDsCS3L/fI3lx2yeIsQIGwnhyWADWkgeOzVtZdNZcOUa90/AfAx+J2I0QA62\nBaPH4lCwE9xq81qrUZ+B3NH7urmH11guNKmpgcaAlsnodUduX6pThVYIz5Ib\nShgHM4lIVGXsHf07H2hVhb1yyXLH0O/Yvpfw1Nco8Etx2EPznMoj5MfXkB2Q\n9KHVpxhxh67BCxSVRF8TGebEPTpyJKqAioIS/NlrK2fLfw5BWoFVN8nDdEir\nOyO4foeg44Rf6uaR3UZxHGcW10Xkd+9F+xCpc3VRJtnwAvifIYzPZBHzDtu2\n6IjUhywWaCmx8JOLzX2lFSa+2yP/PLtB6Tqa76cVv5Dx8dndY4tdef5QP88Q\nA2iuPxW0M5DroTEYssaQZbndWuwaxqoRy/1IkXn5FnZPgbJ+eE9pldqL1Wax\nMmcq\r\n=ellh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlqiiW27P/TBgTrjIdcJmsmh2LBJjx2cFYyI/6Wb1tnAiADNp+uy7ky/IRcd7NIEPDwMwYBhktHL+S00DGBnFw20A=="}]},"_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-snackbar_0.20.0-canary.761027ff.0_1605737622345_0.4050408498221796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.dc93d04c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/snackbar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zSTOxu/9v1I2ZsqBfDvWzsfw9RJcn0O5RnaEP1gEMV+VzFpuTDOT5Z/QeNCCbcBZN1RjH8myJ6wsGdp5MNqssA==","shasum":"aab97547333bb91ce019115b8c0c011b5dbb9a88","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.dc93d04c.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ37CRA9TVsSAnZWagAAWvcP/iYP+m2bD6uBsyVaj8w7\n9J4ZziLcxt2DtiJmTyLReNxx+R/OoGoAmR+i5mt/+/70m7aT2Kn3fBZobD5a\nX0DMteeVzZlIzuGcjT9dwLvpvtX5SVKv80INs06B6z/n0woiO+JMn1bAk8G/\nvcM2Jwk8A6zIRR/SNEQdun5RYPZXKCJMaXtd2QS1SMJc8Wt9doAYQUpAIBSB\njYjoPV8e0R/GSfRqjQpETR5FJeep/I3jbl3iLNjFF0oHpQhy2gRMZ9NpzexQ\n5Fun9s/XZP+ZwOhzAJFwT3a6d7eDaSbJXC55w7TwEE7kJzJhOpgtqPaqWKck\noNFqWTnGWGgEjoAzqfaKzKWnNiNyEMm7oOvnuB2yXk0ID1JkVlMLQAQsPTTP\nSMXHnd/bmwK/Vgd9+DYs5fS1o/6UC7Ut7E1Z0+4+P3oGEGyNxkfuVtmO8M4K\nwGimaM5JAdyKrCNWagzeV7mUc0qk1ssDe9+RzEVkun8g/a555w3CSfnvr2uN\nrDnUB6KyP4JJzAp07526t8kxWQcQktNUHNBfwgX2jl6vk+0zutPcRSkYV/Jh\n2/Yu2z/JL1CmcH9c3WQsZOyYGPBwlHywTeTPed1c7jmwN5idq+2/YTWCklzh\nMzo31p9cJ2cKJouVaKByWMrPyyKtK/gfz3UBRbMedzFVXBoK8rxiT1WL6W9f\nZWE3\r\n=Tj1C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzF8SPaEcGGdlSIS4rnWOm+AJl8O3WXE4QRCsRzjXyIAIhAKhSn9M0glRkrsOKX8TCqg8O1/7GbN5ZxxqQKtZHPjZX"}]},"_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-snackbar_0.20.0-canary.dc93d04c.0_1605737979490_0.10590208627541964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/snackbar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BEPYsVGXQpbAtGFXqdceeOK+YGZlg7+ayMicgNfOj2H3uJsAxHOpNyAwSxNkDJtCC7LL4TL15ySNsn/Ax2erSA==","shasum":"96c0e726229bc98653f2c5152e335031a486fb5a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldNCRA9TVsSAnZWagAAV3AP/j8GBS1Qc/zxu6Fo5sWS\n62ADjsUR9S61WojTZ6DM7Vz/l5ylnDzkg4jD65S5p5u5nOmewrRdisA7FWVW\n6bNU7FWgRFJvdxYGR+36T561UAQ4UxV+6ha8heM+AIntRwfu2U9ZxlwHDk5a\nIbq7TqrlY4hHVI2+CdzajxSNEYOIJFW68D9Guskkeif3vpFv9b/w1x+O1EOI\nNRiLoYbUg6unKk0/glMXMFW9zF7Wo7gcI+a36KYOGz2TTKySsKW+HQFTqZf6\n6by2o5oQbhl0IJ2VAN8IW23es/I0l1oupfFNdRMu/pcaQJY7iHXV5IOAm7ZO\nK6hjvfMVc/YJCb5ybCDk3pkx+OcgaRlvQ33Hlh5lpPSwsuNTwyOcpXVeIVMt\nJ3edmFJkNLCMf0CgNOewWQJok2v/C5JqFuvW95UzLdG5NIC1+i39FQesLrUh\niJqHa9dIqQzs6Er9IuMfk79y+YMJMwpXPuTs20qyDNaBpPIAaJRxsthfAfrL\nQieUY59/fGgNjNWs9FOC+C/JtLemApU2fZ2+DHOEXMWGXKWSa/goakxsPPzl\npEy9D94VcSy+/znHFORxV1Va6ixpNAzIYqzr5RDRUdgMPorycncLarl5mWE/\nb9TcqPlfvKLEb+WNUPQlXnJqMqjjE44S9bHRQKodb8fGpN40jreuZ6a7JKyc\npkdk\r\n=2tH0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFM8oIrO1yTv9wT3xIGqBNRjKR94tjkOuBwWr+YktbPaAiEAvROKhmvomLUzquj64YfrXEICV7FnUeVPXLkFXHAnOxk="}]},"_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-snackbar_0.20.0-canary.4a5d4eeb.0_1605785421368_0.9908657974092514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.bd176a15.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/snackbar":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.30c11bfc2.0","@material/rtl":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SuFkDQEzF40h1xjMxnr2DYfAVtlwMUq2Vox+5/B9oN46L/pmbBKTX/CQnWNW6dwLIhNgBuvSSHpCFYnj7vJMlA==","shasum":"b7a53af2913720a76c1ea62c5004ddf9352c5871","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.bd176a15.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMECRA9TVsSAnZWagAAuRQP/AiS6xxpKL4WIp63z7nb\nCDZIZB/8yil1uS5vrDCqVrBOBvkt2zuKZJXFawoWQJ/vo1WngyQEiBJ9uP47\n6F4HP+Bj6PduOak5idhf2hV+AhkrPMJc2bs/jD2iHVwNkvS+awLTFn6f58fP\nEOm23qc1DDTSMS54aLkP7Xt+2BxD6e4rB1zXOPPIMcoFy1Ex7hS2yqD76lJ1\nCwVCfcmnc+m8BvO7NNmIdASebEzP1eJZRHShuw6KGgXa8VR4uKrIZ+HmcAtT\nUMtr2/vzqiswNlHERhTfS7F+XEgqPCxk1gvjC/kQbvVs6ASt0U47X4WV/3t3\nw0BJRGkz3HN4oZxq3L1Lhrk2Nd9VpTzOOOqQRMOwDd/OVJeOo0eJgCp02oeR\nBUND+t7Udwf0FcKpILOwU5y766j0UREOSD49O2+mdCCPCho5JA3vtFaVlTjc\nCnhITC8W9KvYrVNe3vX/7Hn2HjJQA1gPr92oNo8Cf3k5Uxw+2gCuptcFyUNF\ndyUZKmnk3cT/6Anu4N+rX0AkUHryR10n7v5YKniMOpRPZ/EeM6apeH57krQi\nyXABIXm0jaYZsg8VxavdJpIJnaX5QwD1cbCWhlgzeL7ft+ROjw4/QbViHYTx\nhdvcSZuqD3tbplNFsU19McCN/DcE3NSji22ggFCtg4CttMujNx1aclDf4hdc\nmUIY\r\n=Oy5t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjN3B6W25NFtSB21oobjvkO7oEZq6mZzMSXY6FlsocFAiArOlnGUw591NOkw3G87aL/zrj6NwCPyAPuKL7wGGOMXg=="}]},"_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-snackbar_0.20.0-canary.bd176a15.0_1605812995691_0.5226986926872459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.e85aa60d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/snackbar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4YiAcQForCzVTmRxbmMOUodw47imNSs8T6mcGg0QU4u4RjWTR0KbiwVx9+dR2AWME8gyA2ZT3gncZV8HHzlryw==","shasum":"e524c2744b6e3e552136ed4f7c8fefa1142e0eac","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.e85aa60d.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDaWCRA9TVsSAnZWagAA83sP/0nCtMaE9LAsFtCToiSz\nSswuI7xxU0tNd4w5VvgkC0gnR8o4SOQ4eeBILRaJWlMkeD8ala9uR0jpTY13\nn6qfxCcANYQzRB87Nqo+8FXsdWyDgAXMlV1uT4/25bh13w1Tyk0N7c42ZzJD\nGm+IJZw4rxx9Oci+T2BGQlq9uGBv/pCc5g1kWrJiiyZjuS8MShikl/2cnFJI\nJkHL5FADufBUrlYvFhPBhe/rMlbVGCLzqgJu7litZgwFJXI0kdYkds1bdfgn\nzUdVLjzMHRPk39SCQPKn1SuS1abJ1517l62RSEDjwYwLEW5HSdFAYzJ3/gym\nvZmSY5xwtHh8M2tB+Goy0v+Xxp5sHsMRqD4rZXO2GhyY705/PCWfp04TL3AF\nhW50yM6Hg9Byz74iYwS/T/HBZHbhcqMmM6zpgs6YtORqSS1WCzRJO0jI7o5a\nu6SdUnkXqvJUjv1ShM1fZoaAYZpND4BwCxJ7ZGNLq+suTWDG2kVKSwi13Ne7\nXd5JEJKfWiSnKBhYT0DcDlQkazGRFpZpP839+F+zNIgBm/K1SOFtRy5wkBQ1\n9j/VXoumAHKuRX7XnXd9XGoZHEvXpohjiotGQyHpauOPlAfGomELcHn9lb0X\n1T23C8q2kZyC0hemUZuzm5dEGn3qkIbKseuozuXjErbjpw/+dVf7NI99P/mC\nOi4o\r\n=joxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGdRDbW4zWvG8riT7qT/ixhB+yuQHlkCgsJk3MXXICrgIgL7H/MRKY7WRf1TA3JU3bmFjCFdTlx9MkEiyhL3o17X8="}]},"_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-snackbar_0.20.0-canary.e85aa60d.0_1606170261908_0.4964624005480438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.72092360.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/snackbar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gT6ZZlkH9P7hA2ceygkzSHgutZHGIfhC9vCdm7j7fGXI0LEU3Eh9qWsvAEAbgWZsvqeBd84/T7QszmuZu7w/aQ==","shasum":"2a1f0873f6983ab5eba5d0cfbe2bdb95deb8223a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.72092360.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvIlzCRA9TVsSAnZWagAAGucP/2/44kwkuoNedIa38gI+\ndZ3hRUiNG8Y1PwbkJtwZ4w+y73ynKtJJ1ZSJ0Jz+llkM2rIBJxu9go7vIBmZ\nV5oYy6sLGSd1UBgOmXIIEsW01OhPRcdWs98I7tcXFwZBBqzuQt0Hac7aL3ig\ng5wtIJY9PySclPKmTknQbc0r9IvosGh6SFa9k9TMlJqZhACVoqF8qbgyjNQz\nviXwvpyAh5fDmeuqz1inyYIEmrVxa58el/bbzFne4Cd5XAuQM6Q5IvO0iCYy\nzlAZEhL/avzdWyj9BnIy8uVO4mvF0ACgbOpVaCjuBxe4P7+UZbFhqxbccqUn\n8gbT+cFS0DEhrruI0nRLDbYKXfdDUuBT9ZQuIwmYSd9fzhC5hF2gmDOkuKPV\nhLbt8CEgXmtJUJSHaN8vYy0gHCrWOJVFfSh4UPqjoZlLpARr0rTutDTkSpSL\nit1B0xvXDN+2gvMW1v7G+H7fM0hr4ILND5Xx3M02NHyLrBXtSP6HxrahtUYS\nY+b3SzmBF0Y/LluLwKn2K8U/w/NZhlqsvDLVxmRwM6cXltMF74IGAwzmJPqy\nJr/48g1JxV9adep3Wl7B9KmTkdVIBxZZxmXjcFV8PsUFggV3xEMZ4i/GIRYr\nXGyG5h/BbFQQJ/W+NVKp4SRqXrh0QX8411d/jRX4Hc7lX3/jkADbFS8Vc3KK\n3st+\r\n=KhoT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrFBh5nGHuSsur8gtTzO7H4FpurhM2tNFDzbbarKx4iwIhAJqmh1TMaKFPea1TYounSd0PpEFoE3XfATdbuFszlG8V"}]},"_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-snackbar_0.20.0-canary.72092360.0_1606191474656_0.09071630870795211"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.baf9d39f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/snackbar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WVPfoJIfmgLwgAVqampNpvtGd0il+QNcPuSz/NsAouZ2DEgcLV7MachHo9whU3Hzo6ePWf8VJsrEikOK29z1iA==","shasum":"4906065701abf94bcccebb135b39e7a5453c14af","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.baf9d39f.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEWCRA9TVsSAnZWagAA2boP/jE6BvOrAzwglGkb+oIo\nsP3oQZTghz7VjJxNVLgm9B+a8snEj529uFrUfiA/Y5J8s+jV+qOOZ3Btii31\nlZ4KbUAojPnSBLixiVFeXmwR9oEXpCmv7KDbBrAoLoNDUDrAMU2kIQbltpns\nY85vuCNLPZTrbScJb4p6Vqp+eTrqEUUrbbm361fTkP9f/8OHR6+YETJ0TX8j\n5zGX3KwL1Zl+nMfNna+OgzlO3384Uu/ehdPn8IkkDPQ7/wkz15vWJh1AWL9c\naiXw+ga0uqUBA991/TvBSq3akVDherygtbRCxkk6Fk4zZf34VDDmBnzmuw3t\nRseNBEiyaeRFa/Uz9U7nI9CSbSqeLUdnUlKewxxAi+4fprNYOTIXzbdLvggI\nfIhEwliYbwXFBe2EtXEXsJ+prpLtQb9WQ1nxKmQUDnHZPP5KuOctaIf/GArE\nsBGwz8oNvavSOH3yXTF+PqyScv66TrUylRWUmCJXqCWBA2Mq6w7V+0n4/tWa\nmMzU9+JS+yWm9u8ODGVnJC08K44JxSiSarHR4M1ni52UNL92hggbE3gO8Ead\nlH3ZK3fKTUepZrDbXOoeNOQYdL8dh3zcTZKaOosRf7dNi1YZJrKjEOlGlJqO\nYCBQSHlRX2frXu9VjI+wgSb/jfjGVhGcz/PeLJHer1jP4lOO92r23R1wLBri\nlqre\r\n=1SRw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGwmIus8JR6QAEs6WqXhLngTjobhEe0lwUPDXYerwKegIhALJFshcab7Mf7Ua9WJLCjn/yzWkKHpi5j1aZSc5Vy6cC"}]},"_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-snackbar_0.20.0-canary.baf9d39f.0_1606340885771_0.42440026382404117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.51aab0ad.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/snackbar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GzjD3vbvlZIphVwqNSM08qLaK8vQBQVKXr6mgwcP4wLT16HzbzmsoKCYqPpmLK9GJxboaJ4NIjKD90El2sxovg==","shasum":"4683f6f5de06044be183c3f1cf68d4223722f790","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.51aab0ad.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZa9CRA9TVsSAnZWagAAaxwQAIjQ1ag/BOHg0SjMDK7C\nZ82LFDJMfWshbxiKw4m0a0UTVXMFyTq1MTK2/UzXxwDDaski1nwv5BM3DGBL\nu2+Z0x8aGoM5vP8ow8queejLOdE15tsIUhphjT4GkVoFHcS2n7oMOhpe5ApJ\nDUy+CkSuY6JDBiqkZh/NxpZUE4p91nyxZrHYYXGNF+rHZVQSEl+vT0saDg6b\nEjpQ/zV+XTR07KMkn35/vPA5isTbqKCgTW2i1hnXfUVZphm0ZGW7M4GUq30d\nqHqnXpB0iXK3HAUp2OWl/dt0NBcMyXq0NqNTztVGwu0H03IF/+DkXo1VTJ+a\nGfq515ZK74VFsgqW7MkD+bxZ7Thh9nERxLeaySlZ3TxdMoujhnJ6osqV4Ebf\n42jjblKPQIgCMJ4fQ0j2Mm0oVQkIDM/foW1xNLGQWLxMSQRzPcUz5tl0QYRk\nIN5TfdJzs75IjfV33dlFffuz4V2T3vwtCsSDkloqUyZXj/1bk3NbV6+Wbl6F\nvIb158ieMiRUAkKnAQclz94u2oyJqr0RTbL6YJRtcMQrTIsYEqQ2D6RXma47\ndNlQyllQVQZI81JATHhE6YNGtf1ajKjnI1/I6xHs4bc0kOXUH4yJ67ITqJCh\nkJOESAQQ46YmnsspUXjgWXCKFstddqBpW1xEm+bG9ztrApde9Z09qWH0+hVg\nKlOu\r\n=dOGx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiVwp/rSNzj/4G4tyFxpvZCtRm6bK+ohZyPFKgRnZ/5AIhAPTGRpfjXUmlfzwUP3eRloE3zcr6MG+3mShhiRfLLS4/"}]},"_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-snackbar_0.20.0-canary.51aab0ad.0_1606784700729_0.5074669595462196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/snackbar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-adU/Hsl3qJIndg3nvNQPAqF+XozLpnorvuWZlrE+4wVNxgLpClkS94izoTaxgvHp+FQo8JBxlMJTQiG13IDPNQ==","shasum":"8abfe587d32f10c2730cb0777921610e51b1bbf0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.8fd4af5b.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDNCRA9TVsSAnZWagAAQ8EQAJ5odCfAvqMQBXefxLVv\nue01eUWBOTSxs+UcstWH12OEKQIImEw+BIpp6cSROklap/CyKJJnASISyN2I\nNRaJXxl0XoVjYeNN6RSMri6a7PTrIQSylfvhlxfNY4doZAj6jxxykMIHQMu7\ntwwTabdtx+8aZclm64jhkAlxLKvK0oO+xtjn9IDblyzLU6QocW6pOwNAi51S\nTdhcqCcH64pqX4S09b6diKrdnPDMguV6J0dDuwcGKeXoet+qiZMUHG5NHrIy\nt4kZHh9ReV8Q1YiY1HcVtZJG7TjpxNPp2fDNEfzAddEsMSaFrWM8/Zd+SbID\nWapbExf+WIRaz/h2Hfr5gIhxmK8rFS/OVZ5UFn90YDyxcU29rb2jMAEIz2D/\nW3koYj8K/+15s4FUGesE8kRg35USXFeuXiXGxUDQCvV+To0+Ul1pZQ2dJSwr\nwILgqu96Gv9hiHN+BA/FDlsdlcBlClWy/IaXzP7xuw+8px9298JVaG1/zOQa\ngmQAV7OERGpVn+eo5mn3HSsWI32P2OHCvPHeHPNGtPhgTap70plEZvNgLy2q\nFRp0wCcFUJO9j4A8lnhnpzwWQfLMmbjZJBhDHoO7kpWwY0dENdlRgC9e2Pbt\nHN5yD4DesQwCq09BmyyoOkGVm81P3LeysHWUL4EEGMAmi6Fw/u92iQFDrtqB\nbfwt\r\n=/IKo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD65o+d7FS68OfGOUMEiw2nkUKYWphzQ0DiVzcnirzzowIhANmWc5Rjs7RI4wnKnp0Xb4BnJRGglYvlDu1RImkiNryS"}]},"_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-snackbar_0.20.0-canary.8fd4af5b.0_1606955212937_0.7360004835600413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.26d14d2f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/snackbar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hZZh937Kc4GTbCqr0kRD2Ep5F8LFEabHVs1SC69Jl5py9ussaCm0kmlj1wspiJ4mV7Xx4AZ7YaaKvQ4oS627OA==","shasum":"aae2678ab950cee0616ddc7b7c37d1ffe2e5731c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.26d14d2f.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDeHCRA9TVsSAnZWagAAbxgP/2ujaVF0SxsoTuJ+lBgZ\nPaod8TAAZgVOygU38SE4HgFlf9deIy59pmQT1++KI3gEGnSGNQC4Wv0+sPwJ\nciZM/KJcYJjUnFw66F4JWsgJYJJJXTBoyIaZMsVSirsjqZn3RwHtwmQf2rvv\nKZlSI6q9gxFXXRhktQ58RX/wEf2/s8EQW064lwcNNcGGB7s2K3qVVVcIwKAv\nF3bD3D76r55I4WxzKUpRspxJqVP2iFfypGN+fXpjSiOJGglTddZrljHo9oQS\ntTc/4ELhxnk558QXqY18LDsSIN+fihfm0DKeXGBwGoeKVMfB0TIGJv5WBQt2\nTxMQ9Xn74ODEw70zJeUDz6HMYf4hmQbae3V8l4QfmDVx33Ni+MsXfaBd1/8y\nOqc4KFW1i6+UlUhQ97eF34Gect7og3WrG4q0+PmRFFHbT/o2yq34qk8VRpfk\nBurxMbeGzN0VYPsox4myM+b3SWMUK02U/J4Oukdg1aXcpm6vSZTyvae7vknp\ncwIJ4OX/i1snfYGD+Vjr3BXiCdHr1UG0s7T5AcHL9bf6RdFPnvFpw84MiSpi\nhJOZunI3cTiGFYLuUWMyBMb+vQ31h74aCAjYBIc/emKT+7j8Do9Jym1PJrGZ\nQQ1TlgnJE9j8wrmiK5IFqMo8inurgYwiLE5L++UAbVvGpkTsRpN+qBKBRWt1\n2bv8\r\n=tG3E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7oHfedXDRXqHn+T7j8nsvsbzZy5h6WFfeBUVdyinSGAIgPGnxDGMH+6LuAa2ciGtEkoVW3EkniYghWDAjjN6Gf5w="}]},"_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-snackbar_0.20.0-canary.26d14d2f.0_1606956934982_0.9827319083190318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.1663d7e4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/snackbar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ydze0IoaV9WYtxTY70lg3gnvu2NoBtfL/V2AsGV1qSGiRY2PMMBW5NFApkWc7wBP87z/94CzqGqnXBGqQMclhA==","shasum":"5f92dd766e957775f50a2c01d45d4dbf80dc0a25","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.1663d7e4.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxcCRA9TVsSAnZWagAAG0gP/0uxFQZhQ1twhBVvgZ34\n3xsU6OKIdv0pxi9jbWcZS6KLgcckQNpEuLa4ftNiGfrtQuDgcP5aBp40UskO\nuiG9JVixwrDjK+BT5tjUOC8vLF3sHWhmwJB6ueKGp3QDFPvVkjTqN2hgp8aq\nlT/1Cgige+MXIT9o3QWc2TX7F3bxwivO5oFlA37t64W0vX8IkanLBHVMCm/L\nBKiwKqwhMsXzRyJOxRkHx0/zmP4ZI4TRdhK/6Jn378rtVkmq3YSStyAczDsY\nx7HdnBXXUkmj4nnhs/98sPLShugKAqjEq6RBtaLsqQXGDN8zVt4lw1tvMEcy\nSIi8stmDB+TTBPtB3aFbYaHwNMfKjn6BAbg1KeFQbPbbLDWo2wSR27VEJ1HV\nmF9UpjB02MatY5w/i3c2dGY0XOboReFmDwnsze3DyMLeqjqkJ6BwASAVVdRQ\nDoaNRwfn+ZskStx/QU9uXQVwxX76r4NRclW1IGb9Rt4KuIi0QGxC9iD7RRD0\nweVKRMJ+mZEOn8HR9t3IW4IPk7v6vuLQTIuYVvAmq4Hd/7/+lA9451tGDZdP\nXMf+v9Qti5Oz4YNFDGVpwkmz50VnADnSqO+SGL0NJTmk1QM1OoCXK5ta83jn\nKt2sLb1UXS/usKdEwL0EvkwoHbjE1LEITxgUXZKVA8I7wE3+2qdN5IcBFAUK\nZFFv\r\n=+w+A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN1LPuGjqmitzFcxipmXH0SWNxQIldFe1pClaAAFvwEAIhANmpNW1Bxx6/c9MCCzNNwkQ7+t3+w0rBan+l9Xn9jK2F"}]},"_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-snackbar_0.20.0-canary.1663d7e4.0_1606958171452_0.31535542386250914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/snackbar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kGqK94PppaOe13oAkYTjOP4KFsoA28TtXgQCWNKytwPK1GOkE1GhOTJw4X5J1z6lVbLcj5iDDzSSW9Aag58inw==","shasum":"805b925a3a59d5d7ec0a58971c8aa7df3559bad3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.cbe9fc12.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdOCRA9TVsSAnZWagAAlt0P/RzBvS1T9eiICXb1bSlS\n/6jhqWRksXuG+6LWHFSHkWqcrboiU0Xgc6AX3XAHIqJI6jR8tKFOIKTcMd0K\nixEaEkhJ+otV+Kr8gATRBMjAnydO9H3ZMlGQ1TYhftYJ71anSncqOULhXMen\nJ0GRiLEnTYtmDKi7IC0H2JjCn/7eI7CoEG+0ZdBZgpnBw4SWeJbUCtK1Jgvx\nvR2+mO/nQSb5HSFcJBOz3WRFGykWxjJzfzmDK8dAu+lcJdP8gRTTIYpDG9ZY\nkTQaUI8/DdtiRJWd2PHlbyg/JkanwhMzZsO37KPqrZnJbEeyvdC1i+rhfXb0\nnBv6GhLAPaAzr+sivFNoEABUmSWlb4cLpz8gzFvqIw6R9Zj6tfYRfS9UYwUi\nWaUBvOBTOBd7ywMwgr3ClY0PKR49C33FGtpJKlVcXYgExplU64XzZmaJ4jA/\nRQS2UaZjt6KMmohKGwVe7Q9QnOh0A+MgYuY7vJ5t7ZWy0kdHxKucU6MvHvg2\nfjXPMJO2NQA4FYT9H6OhqzIoHmQY17VfasYYEBzSNG98alkbF0br3AyNT8c9\n+n4jnUkO1CjfLeMd1X9qVZ6YDha9msexSn0r6vkayvD0yYV2gnJL4mEmVkdD\n/Cd4dT6fujChqvWKvp1vQte3qqcNfS+eEdva++bmPlURaYH3Q1Ql04eBIK7i\nWYpA\r\n=XPO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFdj67DARBMNYZOX6SU/PURWt9CGDB5dnQw1Hj6NNVUQIhAKADHa8PyD9K8Kw8uDX9EAJi/2SzC+AtuRwx0VCGbSM+"}]},"_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-snackbar_0.20.0-canary.cbe9fc12.0_1607022414376_0.38861802915214816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.9755be10.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/snackbar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Txy0/V2ocIszM38o5rhG2kfD9xOaZOMEmo8dAUQyPUbArRXnDfKlIt1DNfER7TQvQ8pFPOaABkt1sd3Sw32++g==","shasum":"dea9ce8ab7ee290faa39e385bb1242d7c580e586","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.9755be10.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuOCRA9TVsSAnZWagAA5WMP/22Bibfo8u5XuATIn0gr\n3aANTThbsHveuLmsPCxG+wFkfyLphC39KfIypaqoJ4PWR0N5VIMfPMBTeqZk\nMuMAjB+wd7yqjVYznUGYt8DnvXdcHxV0yTxA34E2t/6EQpeRgOK5Q+XrJa5V\njnc0NHum4jzY9irsk9q+9rtGdA2FW3Ndlsufjfqhno98LJkAhreXIguDO+6t\nL1+UcKHgWZfCTSv8TryqyMgj50Jqi/aeeUg8SIZGwRiYAL3GLmXAadKxBxoa\nHtWZXGHpBgarhR/ObPyUcyWh48hCkSc4LnUJreRrTB0x5bDZ2Iey597oY38f\n9rxHOj715pk+UhKDXw5uUvWz18KXCFlHYc3mx9svPVegA2Im/6aKYDvO2qOS\nwchzSb2TJN/LD0WHqi09A0xQ6WwmN5r7nURUEZbPfs0wzYu8YuCJXTp5vr58\nbmgIhoeayZzymnLZTqROG47fB45/LsefSPDTAlWPdeL25jaOgnKR8VQZOHJj\noJK+ttWAZNLGUJmSS2iUxtk2YNNNdAhK1FZcD76bRws8a4uSCr5R+yR+sDn8\nLz8xdg7/IgM0j+ZRLuqdrVE2tzBfJd1Ee8+lAdaOzHtBWIvrmB0HU+rFDvTr\n5zp7XAPfIM4sGUd76ocuAMaICD4LW9977olMj/VJcX0uYg9HG09d5MmQbAyf\n1HgZ\r\n=gEu3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHzZq2PJSIYSb7iTh7/HFyMHpTQsyrLXE1h8q4D8CFgsCIQCqywfnrSQtFP3yppFfFAnzV+L9hj2ySSY6nBo7yYBfyA=="}]},"_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-snackbar_0.20.0-canary.9755be10.0_1607023502264_0.24202436539184857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-snackbar","version":"0.20.0-canary.3f64270c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/snackbar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Xka78USqZtI/FUOvfqL+Tj6CxWpe6k1Em4zxjC4fgtvJuuk8D8Jaa9591ZsAgK+kMdUG6q7zUpPBpexYVsBNXg==","shasum":"ce23221f752fac6441ac0757222c9b8b0c547bff","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0-canary.3f64270c.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV1pCRA9TVsSAnZWagAA+iwP/3EeVlbbee15kcDAYWDY\nBdBf6VuXf5JiQuNH9MYi+T40FQe/Bkk3g713OpzlYSItLf14Tksy8tJBIOBZ\njYLdUTNE/3zPcRHyRK4+ELyi23iRTFj8++yoiN40ZXf1ovE1AdEbkTx5YyVG\nDOqBQZP1aJvbgm/uHZUpq3lJbbDL607PG9fP1axojbrMv0A9oAtqWyiSz3lk\n4V2UPJ34Z0k2rzC0a33hNqUheTiQRLMhzbctXCFWMAdpmlyTQmKcBmgq3Vys\n2iFjj7R7yt9K3gY+QmhNO8EgJQSmiUlWaVnkPiT0qbPehUMjHw5et4jAIOdB\nVwyvB/05He8Fap1ZtE+b0ohkGPOEo0Cv8y+pvNHEUTrlwPw9bjJm0Ivly1GT\nt7KbqYRS3b87rQ573xeUCH3hOG7dnwP3OSPrb9tMVVFnMYhWZzVJRDLwi0LI\nqbismcoHNvnKtVIa1iOZsPEuXjVQeLOybACyhmIR+KrfX7BAHABnxP5TEYXJ\nWjW4MzdouBgHkNZ0aRV4Jag/J4juOXdlzD/ivDhOr4W2Mg6of0WqZo8FzDjh\nawFaYY57yc6zfB28SEbGjLCI+VFq1Ohf20jUrL9tzD8+TzzpiGxcXOtv72uh\nwf9ezgkc9S1SQP2MCDXMVUkEGpGEqrGpFYCT77yyfwqhA2Y+ri+MzvJBRX9o\nXxU6\r\n=qFcZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkpHjCO7F3veeee2C34aOZVTL0i8gqm+aqhEhkbprkUAiAPAX4qfl+ep66Smje40vLMH4P8D38FqOPq/dPBmCFV2Q=="}]},"_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-snackbar_0.20.0-canary.3f64270c.0_1607032168741_0.9458056290968457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.d893b14a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/snackbar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YKWuEJRqWGd40wDWaWOWThpYTft6jIWl/lMEFIDzsV4Sf1oMsQN9TfJyHCD/ugNuuydpdQwyxgqD3z7NBs7dQg==","shasum":"9a2280a746003e1bb396e29da04ca80fbbb59268","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.d893b14a.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWXjCRA9TVsSAnZWagAA4s8P/1rlBaMOrA/Cc+DOUIoD\nTtpeoIyHqG1RbLekjLXeauYIoZZYiDpxcQCk92KIJKopydreaycKSuc3PBI/\nQe6Hhn1gF3rkvMAJdCuRZVSd0uSx1n8W+seZm9Rm3UNaRYvFPqpRQiZpG2cs\n2nGcu74+p/Elmwr7RugW9c+wjsmnzfh1NlFs5FEJKG8qjC0IQ7PrMzNfbcKH\nCkz0tBFmHH+Xi//qSwiccFb392mcSxP0/+d0//+a8OcJaUpPdxqDEEDgB3/3\nr8J5rN682EJUMlKPHw0p+mqktrtzLRAVoVhF1sYP4mUeFSI/mZOd6yLj6zQW\ntXvQEY3T+I0vR3eKjUrKopvGZA/gMN+sXzWEupWy53dtDKmLTu/2660GJW4j\n5MTSKAKonoYpfcYMNJA3ysjjlN+aPV8kh+OM+d58ytm4ClYrLv5d/Zzu1Q+H\njzUzq9qt3hvvaDL/wZab7BIjHrntO36yw1bhlr2AYOtHYZEwl2WUeQkVkVzN\n2gjOs/OxuJdSKrPTGS7l2v25MkG96ZVPwuS9ICRfKPxXOEEUXi3vjUyyd4F0\nk4F5InfjtoGaqkCdah7KUpHuIkwlxhuuot1X5km1KNSNjpGI6pP6RjvnGbQH\n2V2m4tmlUFaE7+hNuZ8Dyfk4DLxJWEME26r4BlxYNFyMQgEmArnvfjXQuE2K\nBIf+\r\n=KiyO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBuRmWczwEkDFdzX036awcuQiNpj1exNGhLaMeLlUWhwIhAJS7/xA+8LpT6iKZYYvAsnHTIh9EYiaqwAVIRB0b2OfP"}]},"_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-snackbar_0.21.0-canary.d893b14a.0_1607034338949_0.04682313670093374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-snackbar","version":"0.20.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/snackbar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=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-snackbar@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-cJ8d09vhKTxtNl2oBaa/kZr4sF2IJfuS2ss8HkkGm+AMRB8S+VAgNfAXptGalcEWcY0dMFONdcVkb3FejHjVEg==","shasum":"46b52ee8ad64a3ad4b5a8959f8970d2d1b74b205","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.20.0.tgz","fileCount":16,"unpackedSize":67096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWaZCRA9TVsSAnZWagAA0wUP/RSHDHgl0d2J5F4rQG9Q\n/drfXojcoiyQwI+1iyaGB/sS2B+tIWHpUi75MB2fZznViDEi9UvoLzp3ZEYn\n+AIkE7Mk5rk0MzI++6bIpidsBKMmMygq9KeC/kj/v2+pmjz5QQP6iLBiRY6y\nx2Na37cSqn2jE7QmdqF5PBD5YUrDV9FwqTxHZFwzpyfXkIi14lhU493THCC1\noDI+FjFcf3iQPZV1c5AZIEPYgBBGZfTStgH06Vvy0ROhWOY1IRWxF4mOCFkP\no/vHUtEZK8P8UmmnMX5qzJneQ2fzeeXEXMwSwTScJukxJeeCk+MUoZ5Bz+rn\nOvl5RVPRxEEPsaYmcD4ccVe3dBRomXzcofdUrHABiVMth4tvKSukTc6Wdqcg\nYZRLEO/WRVbje4eKZn4SASSwG7UXbOj8QMT44ecaoiNJR31sfmRgEC60CkCV\nV1630NEoIWPgB9SWSC/hRevMkBeEYO9QrukOhwM1j+BdcWzid0Da+FEinnqn\nfLJVPq8oHZ2dk+OTqveQvmaK4ofG1YfUixU77kYksSeS+1+kZjAq/evMpg+v\nV3/nzyWSNoUB2jTs69rGRo+OM2howqJYQwjnUtw3WVS0TX/bLiXCXxum5SDs\nxMnYzOZM+oyE6I8r8E5DASLnM0/r5nj0CpC29eb6tRoO0Qqq9y0J9iP9QM7f\ntbHe\r\n=wEMj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBqRSKXRYceAaEjADN16O7l2HuYPkxwHruGNFeNsw/mAiEAt6D/RQOlcTgnGYMZUxY4KAT1HiWxZvfOVLrByNkM/uw="}]},"_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-snackbar_0.20.0_1607034520990_0.908081578723686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/snackbar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-90/fnDC3TrN6JDG11kgW2yjjxArZwfMRuxJ9RaN+ENC9VPZT52G9h4WXcVGE2XRnF/6DwePACT44cWOOR7etDw==","shasum":"3572e256535d6cb5f888898d305a60d2fcde4326","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.47c7d7e5.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf087yCRA9TVsSAnZWagAAqIsQAIijD7II0fyFCh1do4mH\nNAJ/GIx2AYbBPCHFEoj4ZJT/ZcJzcUunvunq51w0QSNnusUruOn5pN8iuaOY\nB5OgeqMXt9kQArRYrs+apQ+26WfutMCY16FWiXAZHYRw/4QsVKtQW6XgnJ7K\nEjdX0Vn4P4nvr7fHimH/NGwi2SYZayumM6w/mC3e/t+ucm7tauOCIbJWVwMO\nThXP6bq8YoKCx5i69uUIahDOPjW2daBcGs4sHb3tvxUi8AfjkwCAUQUY4Zgr\nfgNmgLDPAX1W22IvIs1r8HQ37WuwrHw3ny8SPSaXAw7VI5FXVJ2+t10vaa2U\nVUylQlwSatvnmYRxXkx2nZ5pKvTWNEQAeDdvMVaJC2wXOA87jwlmpL9Jfr0J\nL+Oza0RQMFrm9TdoEV2lC8UxFlmGpY0Wwi0jB/yLwmQ2Un6V+djCPG4aaPYp\niT9z8ezvCp1QCxWGcemiSKGmi+9VJuKxwR47HBnskqDumdzb2NZesM+nYTTW\nOuElErs3t33+QHi7GnVInE+LydJnQhAoJS0iKKFIwM4ni13qrF3w/8TCyUCq\nsuP2VlbN6jYohsE2ZC40QBx4P+CcLpxSVsc+kZH8Mrt8PpZsJIJM6kCwGyvp\nuW6mx2UYchbCnp126w5IJZ9bQ3fmWAGNn8dPX3hgoFH76WwDT/FsCN2Hq4n1\nd1ck\r\n=4AJi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAePyEIdaJ5z0bc+GuECSJc80gx8ZcKyHD2ZOpaYlX0kAiEApD2MgNoWuXTOmUB6t5jwUAjM+g4qM3o6gAXZmfzxRhw="}]},"_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-snackbar_0.21.0-canary.47c7d7e5.0_1607716593671_0.740779590807723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b304a78b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/snackbar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.9244508bd.0","@material/rtl":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1sNUEiZEqPVr2hN1eltjOgGOH8Uknx4oVxTdTj6c4VScnYYzncu3afvRBfzwSEgqvDt8ilwW62XmIAZFbpu1Pg==","shasum":"1b95c70ae07a37776f8ce23fd7eefdf7c75cba07","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b304a78b.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RaYCRA9TVsSAnZWagAA1hYP/0LvDwDx6P8IsmV2j8oU\n1TW7yB03gT94ezbUJMgVnZyyGU1+zp199vsKSrJeI7lzea2Zz/WcCumRDd2a\n4RbsEFz1/7GDqj10ZV3hMna8NslyfUkHfm1wrhCBRF5HMvI3ISBCoYqVtEKb\nnf7B5VjyN77oIKYx0YSU2aZvOBFAdiGeKhRam5GS7GmdwmY1UApfIUsFnKR4\nZBFLNiVfB/bdFqD/dOI3o/V37BqxbU/nPAIuiQN/O+Ilh0Pvcnv5slLqcbd2\nOtp6gqCeMwXi70DMSvd8wao2ZpwZDen2BhIMHmY4KCMFpx5lP38gl9ZsRvjV\nAzWq4FXrSjh5EM7OfGMXee+gXC2P+0aCyq8R+TXy8fwMCHYXGaHkwbRfiEpI\nsXiwM941a24DcHoBO+l1L/NUPhcs04tv6xcCnEYMu6/Oa4yKq2eqDUjc48AR\nIYcRFDED2YWNp5t0kPKfSLYR8y4PIbJ5Qa69DozPxrtMaA6doi3u25cN2Jy8\n3MJC/448vSxd0osaI2GKhSyvkvDsEzzxX4gWnCHMnulb3fG9F200ADq7Z9qC\nJGic00gg0MxfUC8lYFxh53oceq7193xaoRXBwNhvoGxWpt/PYLvt9GZZY8w3\nelLWrPJvIdPAGERMp7hKPLYUCD5A1UvwByTt4zYnlnxYv+wT8oA4foHLECFD\nFs8/\r\n=Jts0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2t6wUbF2NKBlzgrKu8O+2BQycgk91F6wJn91Hzi2jXwIhAO1LmkZDb4X4jnCEECnbQUJ7XQEmLKMypnIcNq819Xw6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b304a78b.0_1608062615866_0.046416457148619195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.777c5fa4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/snackbar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.9244508bd.0","@material/rtl":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jQNf7aVJCB7tbxTBcWLAyC2iXZDScDQMYy+ep4dTiFlxbF4wKlTmmm4c4elX/jouUFuJqO5sliTuPP/4+aZBpg==","shasum":"33325d66537e7af83c031f2eba51b522bf91aa7f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.777c5fa4.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oHoCRA9TVsSAnZWagAAs5wQAKGLeZQiPFvKT/aybl9V\nYd1UNZtLw4rcN8jwCzJz11Az4a/X2afOIenJn/W9DNEW1U65irjgEgYv2C0b\nK7QEnH+qWr+XjV18oLgAD+CKpBvFzTxaO4GIuHZY7d0Sq18ALTc30TRcoU0E\nkvMngGYztT6GTB7FEgjEjfDQw2zHY4B+E/ySMgQ30kfSqiNREFG3INo/1ZnF\n02a/61h2O3GZUh5pzPYBB8QJrfZFRcBncbgFkXHxLRydTDFalGXWW+WigUYS\nwsw0dkTYyERcMjF4ngep6l9EH3tGlIpS/HC0ge/5EfI9NzvUJMKAMrtUpKoA\n7FdpLUR4VTidKuUyFWcMptsKPq7yyTl9lqYSx+Kp+foXQsvGmldjAGZoGNbs\nNC65almJanHlr4332vnNoU5QyS8kGRPOTIaRdaDkHyYFs8rOVySveQPbQdR+\ncRe0LCA4vll4/Nh2uWJDkrBhmuRaLLFdGyAlHQDtGir1E0eemRKw2bgl5SCE\nPIRvzuUe48gq0Jk+pvHh5pHU6O48zRc108hNIbEJ9jiaTn9SPxqfoLqmFSJW\nnQ+JwcXZUi86TD/oayQb1tBenxlVY7tX+wyCOIX1v3yIPI1iYOTlDuHr96au\n8TFdSsLQ/shjVxWzc4ZyljQblbnDaIw1FRXNMQJjRgY2nOy0UvlYCXohE+83\nGt5C\r\n=5TDQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7MQykw5MQvoQ+Vawu75gaFTnJXPTe5H6+yvnbu1BI4AiAUVrb93iNh+IqOiybx5lyq6fV/ay1TzH6MrKm1m4xIkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.777c5fa4.0_1608155624290_0.9235574329322542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.635c7996.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/snackbar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UIrqI4AZtjOxqSGvpof2YqBWo7KLvJwdS19gYSpYrOIVP1y01EPFIvP42ZKxtaK8zFaq5vjlQWnyfwVGb3S47Q==","shasum":"49399f407fad2d8dfb94be7c819dfa75e8ae43a4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.635c7996.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pUCRA9TVsSAnZWagAAw/QP/0hL5iJIxl6h0dUxyWZW\nmS3zdTCxQ74+oMy9B6WKZh64H1kGbjv19H9UiQCpBNScw3bbqx4pIOSGm1L5\nnLmRIDVJl8xxR30f2ACIGonCgwofJGoZSRu5j3JzCbLu5nBhrt32vdjq26xW\neXDeZO1Ub2BoX0lozLJxxBd1FNukPL9xxmzjxO5Chd5nDpBmrAcfyf3Ptror\nj6ngYkVWRbGWUQPKgleBbhEhFt7V307k838SOspHITu/29wE3ZUElRGhOSz2\ns4mNJcN2Rh7OwpKcXhdC2XNh75BC6CK/bgU2NeA/rNTzrT3OABdUgP0t3qSS\nsCYuIweSzv5vj975NRGpnw9eJe2Z7Fp+d4bp5jc6/9HA8sdEHHR+6TL941Dm\nWU4LQly48VgdvH0R+ChlxMJUgsMaQ/rBUgRmHfjsNqT4GSSXL8QIp05YODBx\nC5tNhsIpMLI+IbWSUQtqcZmRfoWKkw3ViSjxLRg4kOvPQtqxGoEMCrISudb0\nfm+OrYtTNKk/VQkNhXsMQfSt12dzvSf2TTHXTG8xX66olHui5u3K6214Ju3Y\ne3glr8gDnhMM0OvX6t0KqWvBmFYqNRxX6ENzm6KO7M2rxtM1/llFa1pZVNHY\nt3T7MQJEJU1hNEH36o0reJ0QuFEuT9r/ZDRQa++tjpsq586utmsl8/DW6PAJ\njlXf\r\n=kNSW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcX/6mtbVy8TVSFrp3CjAeB6EdsOSThbK/X0ABjCnzLAiA+oEX+7wqerbgP3inQfZDk3WvwZMFiPJA0tq5oy4njmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.635c7996.0_1608247892006_0.9521743539126024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.20b0045f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/snackbar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Y44gsK9NuDuX0XWbQEf8u3uM30KvF/yVOdVrc0n/B6NiT9Qyh2EQ60hhHp3r9LBqLp4VytyfaBuzrvrq7ENsXg==","shasum":"f22ee4e6cae766d266605ccb6816d01516f6201a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.20b0045f.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5NCRA9TVsSAnZWagAAaJ4QAJvF12omWVitRvxRNzAp\ngBtJxhaX8xzT7ra/ub/553YHeJsXLPfLFGbwfi48P5zsRdIhlEnCbh2H6eR3\nsQGtWXUOtDZb0gHttf3k+iWg/zhRi7U08W9t2MzOKep2J/5T91ULYTyoLQOU\nIFI496HY6M0FyeNG4Gxw9RzXIrZqUJvJu3fFer+DR4LuS6bUKkMxmwDGZau+\n3DNpX/0r0GWS9BYRYuvGGLC4TOOTmfslOQUsR+XUoXsC2xDyOg7qeyH4DUxt\nKBI2TuEs4MWvtaxd+8nY7YCdo3+7eYiythAYamLWXqgQaCv/vl6hBeeafk04\nLbv9C44wLJl9kbRyHFxgPXYCSqewuTjy36KKoDe1i9BGSuh/Cdmr/74Wphao\ni9xpXdj+AvSkQR4ZTfoOqw3T9VP1l7LfsRlb0PjXjSkVaEmQZIYl+ZC9J9vB\nFVG1Wv5wCXMPUcLRO5yNVKDgtTCV61avy8NgPINPem28WgDXVJWEWak8NL7f\nQXsMASQA9NMg9hrom6Rk9ZaYVMxjyJXv1DdRwhPF/jiAvlQgWQrRI5SdEDXy\nmsvsmJGZSFCQJJIahkjwJPbTFloacXyoNeW8WR1ZzhA2t7ToRG3xUAq3TCs1\nOCjC1qim4kyLSd7pdsYh1Xen8fr25AWKw9M9nTZ71I0s3P/Fq4xxuO8Xy0v6\nxNyf\r\n=8mc7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeaejOjz/1N5OCB9u9OjbHH+F6x//0eIM0dT95lGv5ugIhAKGr4OSvtlTVutVGlbiYvw71pW23lM1/XqWxwspfJB9P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.20b0045f.0_1608248908916_0.07988607354803423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.41f77000.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/snackbar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MU6dHYSCD7YEW8MWXR4zshhCHZC0RUUZwz/sE0XkUnJTjeiQR4dgJ5djV3zQRS+ZDZiHYVvApvM4kwHIJMlL1Q==","shasum":"51e37039ab68383df74b04bb057b05f4a64b7af6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.41f77000.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/krCRA9TVsSAnZWagAAefMP/iy6E/rtmAof2xgUEaZH\n2W4Fps0xnyRt71vLNLbTs7bRtRmp0DOmg4IGAmBWP0qFDhYmi7R9vJ9dc0bw\nHoUWhLH7UZmWQ9bMOnl32Lcs3/vw+4A3L/S5/3v1UcezZtbhCM/2ajFGHhC5\n3knye/vLoR0Tb+HiTNZg4XRIqGLH9j5UC53uHYG18uMU5KjZ5NKJxPhb92Ji\nAGj5DjRecM0x0CrbXYXmRgWUSl5/jyXw6RKB6PPm5Va3ETLgfe3dUHKT78c8\nugnT8R7DA04Lmw5DUFFitdpYuNEz9BWKBNZmVE4G7QkZwsgDHaROCMY1DyOS\nbCwgwW1n/suh2el6ckt22mTa5QskFW4hosNqmWgvSdpZaKNbOqoDVaaVNDyx\nBfwosCqenypDXBP2deEOzjdVSIxoPsUphBb0YZAxy5uZQMioqQltXkhcWEab\nPHvWP1o+VGJycMbyh+rYSjqwzrnirr3Ea7x+2enygjdK8z1beIOJ3xlpzJQp\nPmDZObLPMAvNSjmESdHWiJQQbbfy0Qllkrsl4NO5iaf/M6rX5uS5O+AIebO5\n40LDyb3Upg2YR8jgz8+L80BAk5jLZLXJVXfBxaLt71d/rInd6NI6PjQNyAs0\nzPCse+6BBhOfKJdtJS3jqHyGqQWy31FRncRRBdL8cIUfPi53YqS6JppLhD0a\n43IA\r\n=mrXU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpUbhlT+8UMvy16Fg+JJSARetRniOtjr5QLPbzNDG73AiBlDlZQSXDd5uwG0iEC56/KHMbcUwPDlHVRDTDMxDC1JQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.41f77000.0_1608251691224_0.9247803576811544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.afe4079a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/snackbar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tFz82NX1MB4MwspRTuC8YHAa+wOwF33HBiJeWvCmPtmapZI+A3G/nyAECACV+ISlrGziL75dwrcaPlUync1Dsg==","shasum":"81e4c7597804b42106c21ec7d086ff4449e63568","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.afe4079a.0.tgz","fileCount":16,"unpackedSize":67131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9OCRA9TVsSAnZWagAAkvUP/A6dOvel/gocMC4T5eMk\n2aVliYcb0JYYNYnT9g5DWhaaIdu0FH2KcqEvXEWAidpnXqUcbEYa7SjZ/uqw\navEBRNTFe55iZ4Eq3DFTaLF+aa7vrPuQNebnpf22UY2nZuovRyeqs0wlZMhd\nxEjkfyP37TCxTeDaekCe2DV5irKdG1Hq8G2pcyz4ROcXVU1ZWjRtWzi2lxnz\nZl4QOaEk19wyAUXjLXvp2gOOZenfJYkLcPFFoqR0psLYXk1q4xEqSwoWlFFL\nNISUU1ic/ro7K5NYNVSwXSLko+vumJ605HO5EPR5q8mQe37hY+02kL6r5D/J\nfHxsgtSsxhGZdddTQDM91pmImwKQuIBiIRyHliUdtKoP6hUtyllMG02VYUYJ\nokJZL+Q87YgH3b2Q54oksPDNO4KiYrEZkz8/2+XlytC0S7hZUwoYNUsEbxz/\nHsomUykVH+st1xnAcQw7xwrC/wIt9AzROETL5ae0n1o0bbqQoUG5uaLDA3fO\niNhElpQRVFtAIGO6BMzigie/LPrsi5Yrm9Efaj56CNxHqVGB5VLzcIB6zHpj\nSnxnQzYaXahvjvSzgzQt7HJutNFg4JPdJtMaZ6oOJV+SvbrRnLvW6cludqkN\nu21YvR1a8fItdxeth535/lpIRD1yWWlvWDOHXZs91FKao3QEOaETvT73nxkN\nLv2m\r\n=mHma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6zdLcR5ocglP8nvsKq0DxPkwvo9snLaHfAgYnPXbe4AiAwYRA5Pl2kYzwqKT7z6OKphIl5gNl3/+BNvHnpckJLtQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.afe4079a.0_1608658765666_0.6519517607115186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.407ef8f9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/snackbar":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.671d72d95.0","@material/rtl":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lq8jEzSFZDMlprMiKQ11ymql3IPX00vTG4IMth9MWdV7FxXKxqGnorMcFOoB7Yh6orWEdESVRo+5K9eDfcXlcQ==","shasum":"7d7d2ffe4c00a0778e993fdf106651efbf376d2e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.407ef8f9.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Qb/CRA9TVsSAnZWagAAMPwP/Rey2u/CulOjM/VYfJFV\nKPBbVY/6nD8+BxPubToeI5UfFBAC9TDKC0h9UXfCZA2XRQj1lrQAqp6+fsvs\nrWY5VjywJ2gnLIaN+RdjC8i3Uc79XV4WY2exWgJuoJRgulQq/Po4i8ILrd74\nqkDs+pij8NF59/m0wia/K8KJ5RhNG/eiuxJfT2CdY+sOo+ZyqOzkEJuZzQsR\neGZNfBjE9bC4gV8bav2ynyd3PmJCNCybV92PvMa+fcfxkG+y8FGcUJioypgG\nsZgpjwJ/sL7uzyublxTaiWZa8rPTd6tabGgazOt3uib7TBhqfJLoHCP28Qf8\nQ+RZoreX16RnbnuhMs9CltwWp9Vo0pDLM5nXY2HCL3J/iuSVscAIYqZVFlRU\nIEevrG2n6YyDsPLJxQN81BXdz8VSvJbuZM37kFuCNJtv9mwbdaGZA0i20EiM\nhagSrmIsd+UvCDOTW0W4EGlFPOjafwjxQ1pNdOkrZRVC+D8v/G84s6u3SxJs\nHlEHEvo36TWnoBMIY4Z7l+NgsfzBOE2SAsKgGHvhNRbouy3Q+SKavOKDnV9E\n7lHGUScebILyxGQDdn5PUrilTxee1MR5v+5FBl5nME/e7C6R755GcwFlZzMf\nmNr1XFwMtfEuq8Imc9kWXvM2FWT4A5mwopoIugkvPoCT8In3Hzj+V3y3AsO7\nnR4E\r\n=tpC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkB02FDb9EYXcyZ0ODplxslZs14v0ym5qsid/Ikz0IgAiAMup8Jvx6FduQoG64KD6/61GE+hKzx4ByiWv4v5b3B7g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.407ef8f9.0_1609369343232_0.770770963418921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.2e26e137.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/snackbar":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.365c69360.0","@material/rtl":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JWqP2IYA9TwIRMaUw4Old8ToYZxbj+YkXqSSYGfZyIpusYpMjaYSav+568STygeRjuANdw3kodlIO7dNyWPGAg==","shasum":"548743d185ec9f674a2d7d22dd64c039704b786d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.2e26e137.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LSsCRA9TVsSAnZWagAATu4P/jLkD0KFoAgxPvesVm4w\naU8HIRmPPsqu0jPMbGDjxV2gZT+k4/emit3ojTtWHglnBPrb4H34dSCkKDxq\nyEFGnsuzbR1rvuto3kG4+i60CvUtvoVPgekIM29/uYefshe5Efs38u6Tavs7\n7rmfRY1p75L8ZYsdQ4WLtKuE048N8fr+7I9OFYy91E2lATYawybTudQw52jS\nCyL7x39mZbRtn/r7lsIzjNu4FQprmBG5y1LwgbF/cb9BUnT9Lcpv4QsW6wQ6\nonqmPs368hmdPaC5EJdNDv5CtcMzn0IKm15KRVR4LC+0UrEtfI927L4jWbDA\nQZhX5lyupDZKA591jNjokl8ISF26THyB28L+cVq5TThD88qxac+xNjRHk65n\nMdiLdgK/wEKuIpx8N29oLuUHpD4lDEzV7dyhzAEZblfFEX68W0pt2DRYFEhz\nbWbim0C2GIeELiuH8ARYEissZKaPiOs4IqkAQTozh+JxxSnhu18k3AG/OMrY\nNtS8bizdDsDYsoN4V2zaZZ7SeDO5prxZv/JvNsNTKtE6bjqFfOlQF1FTHWCI\nT1Sm4cfxSoDSRS5uQq8MnIH8hoEsIlowWbuq3jFKPMV5OYFenx+BcoSf1rt9\na6gZjL/UhLqlnHNC3fiIEwug8tmUQBWsFtPvcPEtzDcF6n6G2MQQuPAAZ9Em\nfS/7\r\n=vD8A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWuZuGYijufvyIE4fvMAsip11dpQheJxi8x5mqC8XV5AiB96uoLTHypqlArVcol4yiptzrdL/mjLLklBCTCITDD3Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.2e26e137.0_1609872555822_0.09960422687502057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.9009f6c1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/snackbar":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.abdd10065.0","@material/rtl":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4VSfz7YXZMHTa5g6SLYUZHAhh0IHu8HUrRvXWWyA4Vr7Vrj7GxJWO4035+71eC1N/IEXA/zn2uUOVmfNXFkhiw==","shasum":"caf8826cfcd9feb297681af59e5d304a5cfbcb5e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.9009f6c1.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhYCRA9TVsSAnZWagAAZNMP/Rmj1NQ761nAYWcB1Jyg\nc6N1kSRTcNWxN4Xm70r2/VITHI1ge0DZOhvRaZqizXEbDJJPW8Bk/nXbp/hN\nhPMkukCCEipwN//nWf3h3f4tTP/Agff8muaMhs2ggFKcD7rzg/mxW3blXJSO\nvPgkUO8LtULTvdMb4EYFt5Zoo9ezx+iJlSPEqxnkxh1fB/r4Nzm1dLOGBY9/\nG7uvxcL02gyVoRio9u72nN3MjVqkHynhfWrbC2ojg7AStwsVXET8ywDrvSvf\nHOfsdaRyogS7d4HrYxmyuci229tqx7y3QFi3h71gcO+O90Wh6W+RiH2aoGzq\nSALKVt4AjCoZ3mp8VUmkVh2DOciX1Oq8isVUx4allXU/z4H9ECMUhWXp0XWu\neDLFTqwnH87PQZ1KndCm9lR82czSn3fTL4vg9WGjUtnFdRSfYY+yXT2SmYdT\nrG3aVEPoUWCDmbEYIK0PlQqLOAaxqEQguCsSTWRSPyIQqgs2I0l9DNDIAxmE\n5FGYErwQinoq8MSD5g7ZXZSqDLpJfj3iAlnf6Bic3h0abwTR57AZvgBXwbyj\nVE0CwOcnZKviNmk9315P+FpfDBU2J1PXbO328CnFOxYI6IiaQ4uM1ldoaOLb\ns2czKmp8CLqfeFpMP7p7+y/WD0d6DglkJYKVU0EBCWG+qKKD40X/wYK71LNk\nJSqm\r\n=SOdy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwZcixMDe9N9nTyQ1ERKb5l4meYAuHx573k7NQcBZsVAiEAjPK2eWP0nLCwE/VF2N8TVmSVuR7yqrU4KIUGr6tdI0Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.9009f6c1.0_1610135640134_0.19200628174577772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.ee99b646.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/snackbar":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b8a1a58e4.0","@material/rtl":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4IIJIVQsS3BXjC94HP8a237Qy+4vnWnXaSnkfxxKSc1GCTXUFPzUe5Fxdrc92m3RJA+IliRRqesv60DxMd/RCw==","shasum":"aba1eed7e83cac78e0e78e69cb27a13527fb2e4d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.ee99b646.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpDCRA9TVsSAnZWagAAF1sP/0aQQsHlKRRG7+NLyccX\nlM27zzLv9OkBsCrBWuE0bTfbeqbyzU4amvOBtlCyrzApAEa/0om3tqK+io4p\nc3m/lmXTc/3E7vE8Lbei+bWMeBjeU/6a/kYtAiMVzyV2FK13+G8ScpKOwoxY\na72FMe1pjagMk8lJF8To09wbqvZiuRKOihQDHq+CXmYwBqhdruknX4bQ4syM\nPlycoCbv9Yn/4XfXDtOAb/Z9GK/+WY458krF61yr9wU8fFrwY0qHeRZ/fotn\n8RmG3MOJpJnz3MSDgehnd61kzj7MRhhbxtJIhlHy6v5fNaFpoKW6PmgcPFYD\nobHp+vpCvkcMXQ5hZNYWYIatgadNgZPjCZPHR0+r2/9zIBadlqO6EP07Tg9o\niEQF4ZUT1t0ePlFQfNM8meYnUrE+tPP8/p/L56Ma011rVCJuL8AscZq7it07\nPenyUh+xcE8E+9gqo5UqiwqEqot2TkYDTnhr8P/zEd+EcWsfWBbEM55N3bxT\n9VYPfWpo1JqX6kMwcBYVXvaqypzWIZPSL/4pfM/daco4s/EeucQ5XVvKFGZN\n/Z/Ow+vOfnZeviLmZp/kCSqb+2Bn2fqdxCfDaclQfaje65WJNCiAC9iBHAqZ\nnGMAt/WfGg2LTkWHSTqVyJpmRdpsx8CrNNwCq70n2nBPYbqFgUYNqWRkMcsS\nIdI8\r\n=V2+3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZtTFvDjhbXrAMY+EY1Ohf4MOBVFwoaMk+GPJOWq+XzgIhAKJEqBaa3rRVkHIBZuoDKTwKxtIO+hOo6Dgziqy8uT6k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.ee99b646.0_1610406466790_0.30727710010965326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.740ed33b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/snackbar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bJ5KCM4KVhdKfbiYi3K3CkcM8gyFWmRS8ausm4Jgkw67Dh6IsDfMQHn6DbJ3qtyLBfQlIWhFdBOuhHH73ywIGg==","shasum":"ed8473a40bdfa239f88d27457da9f00a2ceef498","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.740ed33b.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSDCRA9TVsSAnZWagAAsHcP/293hjl6hA+8C+M1dL6z\n2VT1Rn34iFtgB34fbf6TZlupQ1jaIPVyrtJro0nVi0FyhSyW5CrHKB7+XR0/\nnhTZYzJZJfYLPT8189hjKhwDwl1wzO4ajviXb63pP456ycxOVj2iTFz8tW8B\nxrlMd/xHVikT8sDNPHCouIp/SHC/809eIY8M1ztjvUyK16ZYg2DhpeuGWpYw\nCznBbTOP9cwrXfhxxil+Yhl93+3GjznlVcMHB0pfYdjZQHHFy7IuPacxDb/4\nqDRGj4muzCbjDyGR3o16T4IaUCa0mu/jo/cL/v4Hd+JxRjv15NnQzl8tC9GY\nL7yJOm+5Hl/rS0YNApbqUOsBl6atLzQwlQ2gBIl4iulF8MQjtvIqOQ9QrSUk\njijtyoj3fIxFVQCu8i5Ajl6WFU97yvs95mEtKkULyNV42Bv+BwGu7t5GoUZo\nulv2ThRoefMdiObuYwB8y1b1wrWTFvMIGfGVHNWJlfKffIazdi9m5JM3iqA2\nhHWeqCmYERfc8LOInUjGf4LZSnr5MGf5I6/0YpHdNUEXWpOge7qzPzcyx62F\n5PbqBX9hU5ltF2qAkB4Ki7EVD95C7+FWSIWv+NuMlFfmYvJBxMQhNqMVpyqU\nxDV5QrjSsDDvRc9b2pbbIdQs3n4yJDQW2fAX+44FV7y+V8vbpin9L9y3J1z7\nExVV\r\n=Nolp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3vr5RkFGaigjZvtc+lI+djFxQ/GDQF4wb51yuMIkenAiEAjOUbYZURgA/ydsjtFwxe9PnMB12vL/JSFw+xJnHUS0Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.740ed33b.0_1610474626801_0.9857342550983084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.c5c541b1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/snackbar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vPqG+fic7EkpGWcdcXdo1fkRmf8IMul48MS9y8MAuuaERVz7extL3Sm0SrJKl98nRJm2Ye7BO7Yy1g+ZNMHnbA==","shasum":"3e3ed80b8ee55d1c0897f68ff46e921fd52b3453","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.c5c541b1.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e46CRA9TVsSAnZWagAAEAkQAJ/PAMqUQHP0b0AgXNk7\nSyA5JPDDCYfp3R91l6goqHJeFh7gxvSesKB9QNlrelU5jv9gVgcMFEiTobkm\n7etp5VGpGvoWZnx6VNo0/oUj5P38Qbp8Ft1qLB/OaOM6G+q3BNrfLzk9DYAs\nOJ3+50MPL5KRNobOf8NeZTy934+l5JYzzXYiR+0x+KZuyaQhl22o9AKXY72Q\noErxpjqqfmLXyEOGtRskPFU+giDe73cNO9/NxcT/jFCAaibmwL0UCVuWe+v3\nCJAd2TO77849w0DtIYJ0cE8TCofhHRf+UT95/QWDAJJrDodwwqjmrLxyt/IZ\nWffKoiNP5fO1muxKPgRUiaqrig6t7tlA4PikusfkmStDTlpaQ24vwDDsIWhe\ndSkxe3r//ciDXY8OwsFPGo+AfUeIWsSt6dJZIr/jdwQCSozkJGR3V3er9ENM\nLCfC+mj2uNcgpnAUgwvM7ypQjMLuGi/Yad4psA9MjjO45muKmsKWp8IGoBQl\nKMjbZoahD9RnNGlwWT4Yi5muh0KZCUpcN1jq+0GPbpdsQLtAiyw73DpDXBGo\n3syrz/4Ww600petmbg4Ie3biXujKYlnvvdl6+I30KNsGgZdHwMPHWYlGQmpU\ngRzE2Nxx0n+NLh8DZXdH7hEIYFpBHP7SI2EapWj3LqVbj6NJFMZbqqYmKd1+\n1MUd\r\n=dIjJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPpHRQrZSrfAqNnooSh3qvSB4ubPeOz54Gnq8NPcn7NAiAr38kmRkaSlP6nhTp6RLPH437CQ1EHGHoGSiCGIvBIeg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.c5c541b1.0_1610477113552_0.8094599479470723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.06fe9d90.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/snackbar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-u11WKKCCJ72Fd2P3/rA3FsxdVoVcP314H7Pw6WCTMMELDDJhPJGkJqpomeEAPwBsAyqt090vOG7jjHi7UncZhQ==","shasum":"515c43eb202224c13838aaac138ad75f4b4da859","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.06fe9d90.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gyTCRA9TVsSAnZWagAAwGkP/2htgA4i9mUJcBq49tui\n3h80ZbckSQitqYsi5TB+5SPBgn2x9gXE1cvUxd8+0TN5pkd0Ll7L2byKmzp0\nrKJRwMPdXSO24P4QGpN4igKsmLIBJHP1HRwypov/lsOpa5HlUFhtxFEx/qtH\ncjNGI1ePZuMDbux62RE0GcCBs+9HDUgXKwXTBoRvSrPuTpk1SdwEmbXonXhe\nDi2n56P8Qhi12ml+BpkOCIPUzteO027IMaN+lMH5LY5nfx83GyBa8hYwTFrg\n0PHKdK1XNYiM5Gfb5PkeeS25a97/v0UBaRnlJuc3SIlfsHkoJfbaPmHVkGWu\nIIyNgFOE58gwoOX8codq9e8It0uZn3GL6sYUlSAqV12mbEwoll1YdYpqZNKY\nCfNY6kvEG3nGpEhxLbxHe1WqyLKYpLyGhzw49QoSDEVUPsTwITQ7n4M62wcR\nZj4TPNjliY87Rp3hdB8JQWuMwrEqJIvZpPNH92Cg5UxH5PzfDcIh3WgQzhFx\n1u5vBHcYL31MCzUmLxkqkrH9Atj2e7HzvgLfC4gbxKTC9sEoUk6hUpSajg+y\nTXVfIpiolrfOtFmlkh9MzvcE5aor1IUEb8iTQZiCqBlPpEoH7W5WjYP0WsBT\nk+n/z02k5az790WCMOYC3Kuf+lculW4GVB1oERv/uuofPoUOZy3aS+ncOzKd\np8AF\r\n=ECgM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKAlNsXIN3u2gTaaFku/tXGroVnqnleWuFgAHRa6mZsAiA6DIjlErPNCS8Hx6TZbzmG5rpcN0RV6Ni9iNk1F//8XQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.06fe9d90.0_1610484883036_0.18633036226498612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.269eed01.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/snackbar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f6GZ3ydbzifAe0mfvsIvEWAwDwK5T92mRHRsk0YkH1sHdKvwv2A4Sa7EYtrasel+jnISHYu0bqfj1ALa/GTrWA==","shasum":"4d2be542e5cb9f2907c8864071559c47f06c0e5e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.269eed01.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nZCRA9TVsSAnZWagAA0/UQAJjuKD3BMCr8DDCLriqx\n8huVgm0o62D6/sKikP9nLm9nEVPro5vS17iFlR3gyqJHhvf9VSF+5EG7bLHR\nnvhERbzHlM2hmtUZ86F/bRHZmSNLU8XaU0AGtaI20gEPd4qnh5FlE+atIc/Z\nwiBIOBgNwrITWrBREfoI7PxCURY0P2+QoWjc/L5MbPO3tnu4pJ9V+HW8JQUy\nHxxBQF9ojiBjS8Zzn+r0XJcYbuZ1xbkoQwYhliydVz7Tk1e+f78jKc64XcAS\nTFYtKHkYCVirLbbqOQOPJBlAXlaev3QCLZ3w+uge7TUa0r7m+1yEBlntkNeM\nh4IhW08zGVQIHgFDXdn/XjOEMb+LuZAEWFGHvNrHaoE+mP/1UW1x3j99A7gK\nW/bQizG9TaKuhOF9nk4ivNQBGsA5LTWdtHa1fLRPDvsVMrJB67UJGSisUT55\nBwwFGyyHGixJPORMyN7AnC5oF74ODUnMMh1zZZAPwyDKQrG4KEnl/Cey7+dJ\nUP5VpRxEb+vePyt5qqaQc+NiB7jZ09M31whN5YdW5CpebBLdnsO5LXDS6Kzg\nt3HhXSzcJCSFwk8CWAsYvCMVvxnelWq9uIbfBTfXiG/bXeqSuasl3eZscoyz\nYuy4oa7qVXPYLBwY+fPMryhsKnJs+owCf2ntX0CAwZBnx2/HSlRVCeuCwbhw\nkCCR\r\n=D2V0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvt/eFRsDtgLXlg+syuDfs5v2FcAvvQyit3a8+sGFoMAiEAhX6V/vF5aCs/zaouhTI0hx8PK/nJ+kuYs6Bi6U5CIYw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.269eed01.0_1610574297518_0.5698740160018532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.8c075f35.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/snackbar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RwUTtrRpWiFPXUCPerC33/v4U3CzpgCEkD1yqYKivFbgPDw70683q1n6ZS4nQqIifMVeY1Ww2jFLNAWfawDQEQ==","shasum":"72c7c138b2ae874639e84d6039b40badbd2262df","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.8c075f35.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/3z7CRA9TVsSAnZWagAAo6MP/2r8lMWJXECwskdv0006\npVQKD/jyheXU4QbXN4ZKjQGbxeRMdAl7fqHNemem/fsOYdkDGdI2fun+o7DJ\nkEiuhJVOHvLFfdEwnxvWNy8DdUUrTzG4ReYtDRlQGsL0s3vW75BrOpa5ANIR\nyGyjZAjjmqHgGJgxP2HnUufTrTJr+m2mwYdDPEBdHe1Lhr4qKNmyu87G5+rs\n8RSGaEUczkROchf85j0185SMH4RQYrEK1Vq9QN0ANarNMlUD1eFs2J5VHVDC\npE81q3UMidHVJD01KHeLsHegfkRg7JkO0H+YEe9BXM236WnlxLLuRbb7rCCO\n/YAbHcv/fD2rH9Bzi+rSrGhAzlGsnvc40t4cWNKPO89h/0pk0h2UWbkyQpxV\nF8WZyuj1tgRrFiLJmJ0Ax3IGrfbHpvM3J9DA6seWdfhIwayhtl8yBThOTrr0\n+KIB69WDTTWjzGyZruOTCzTi5Llzv1bjuQMryFUWY4dcw5Et1Ha7kvmjUm1f\nBEE1BnO3Kf9zfsHDXjbWktmjBlrKjnOJi2MhhwzVyw8EcJ3h97biFDzUg0mW\nVFqWgSd41/WjIeayJoIt2Qkwl1T11k2tZzQZ5+PMT2R3cH4iJ3IFcr5gOaAo\nqpgmN7AwKnuTzmHkUNhDH/fjsayGf74mRl1ZZ8V3xyOxsflmf3hmvDnjyK4j\nOKzc\r\n=KeMc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0UXYfGlP+y9qHrw4KtQo0Hya/0CUyJWgpfmV994f1VAiAbsqdfGtu0Xd/vbUHqDYRCM4v2tfzDsFKaIhfAtxBpTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.8c075f35.0_1610579194533_0.8111085186235434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.3cda381b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/snackbar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.7584267ff.0","@material/rtl":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f+BAiZlKQX2wJbQm4aeaGrgGihSSfjgB+EEPQ6iIT7LvH5D6gHFTuEFq/8fCkT/Kx3hH5aoJjERap/wZDBFj+A==","shasum":"9c0a334e9c37faae0b216acf732a55016c667c28","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.3cda381b.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4p/CRA9TVsSAnZWagAAoIQQAJS1LDyw8BXprU0CLmp2\nj3xmUbvxCuj8cWh6pvpLRqaASJT0UUDsdvs6xNYB0YtsHr7AjDCG3LXXeoEq\nftcycfc6aD/qy7ycoHt1PmTFhI8ZXTEzf0hTtNjJFdRKGQpAk1xYjkwrgNf9\nNh3hvryk3iQ8P8p+UWOQTwuMI673KnkLZ7ccJ0w1xi8BPNBQU6fw0JPtFC8z\nNxvSEU3ZNRd7qiCTPng7p+kcy+GxeDFF3C8c8n+t9qO8LsQTqbOMABd4ZyV+\nV7sw+FN/mom/9/wF96VjJ9DblTNEeOderzyloERPSQ6iJldFw0kTw/S9vGn+\ni9+Brt25JzAWOcmHzQ01X3104xfp25n3CQFlWnRmiX+tu6/U38gHPeNBvWmu\nu4jTbnZ1+xjFR8Mv0XEOGIH+NaYnfotdzEXZKOq2Gq32frSIvNw2Z55+57rU\nz5QRcIenZmL9lijZuCYq7dh+IKEtjEPxJlWp6y/vOlpGkpyrlC7mY33OZKtO\npgNA2bL02iAtuO0xP+DfJWr3lnl07ApnxsuPeThbL54CguzoI+k3vjVYh84z\nQkGj2Z/kHF8kMpXn0YQeG6BBxPNP5EJpncvw+U7yhaGoE17TdCIrRj+VUvmq\n9MaeO5Ym6ALiQAu76jt0XbtXEwEMpLJuV8tRejvRP+nK5sl58wjV8JLpFVb+\nUoU3\r\n=X+tw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgsw5q5089NaVx/hpih2mrV7uqtrF5vH7fgKgIFVZGfAiEA31rRH1HJ5gMEhxZfeqQBSKjFtp76HOX8Esbj/U8ETmw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.3cda381b.0_1610582654676_0.23710043615168508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.bc113605.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/snackbar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.772cc1068.0","@material/rtl":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fAtEVujI9BwVL5y9Is4u52nu5Q8uRgdfiVylToO0yK0JO/9B0IngOAJzZ2Po+ClFttsPvooTQX5P74XXIgUmnQ==","shasum":"54e47d51cc43ccb21aaf05b4cb9cff6a549dc522","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.bc113605.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QNCRA9TVsSAnZWagAASvMP/0DI3FnBWoKDQBxH0FAI\nD+JaW/qZ069+pPCgq8JZ+oTdN/tvGceF9n2eeNuZ2c+2W9Cas0MWguuMJH0L\n76FONfBVuO0KScmZCXh/uZEgBFIUhC8NqbAy7Ut/l9PLyl8W0u0MO5hVaDDU\n1gl9+NrbgcYdMggzrNMeNs7x2a50HNxawdbfAwlZguPEPbf+yBnrkIDidWk2\nK35+JTD88Y4ZEsWFD3ey0V6c5FxULGvPhkEapr8w6vYEWFYXUl560diPK0be\nyS9eCqs9v/HDRp7EJmgyNBr/35ZjDfHLeKOnV61XD+C+HK6m6vcQVBRnajOR\nBaGEutk5XtxINx252zf0jAnMGdQrYbB8KTfrQzx/jDGazqbuyX0M/eKQ17To\n4+aqVQdHoyMiUFdQldvrY7VQbw7XdxmiPN6MxMhlzIgiVka57qLOqvCfr0h/\nHxS17Cdkm5tlq00i4BYpLDAOWrzKOTXcIvqTTwx47xeDpaNhLx0ZwJxL9L4l\no9JcQuAoG1LAf33FrQV7ZIrk3mUeanh4rdXw7Eqtqxspo6JYLIwwpHkFsCFK\nhOwpvYa+xbjUH/PPZxAVEtFB5LZWUsowTVkRvWMghGRM2IyxaA5NTkvYYOT7\nE0lUyaGmaVIp1B3gnbAg2k3iZ59radUQNjMsOaPL+RrY3wOkKIw4+VUIhFnY\nqVjU\r\n=xO+1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkj8lUi4PgUsTyqL+vZdxZmrZygwHM+2lTeOoBEkkbiAiEAsAfAD70M+RKWVPDbLo2FI1AUIZCZM5JISzmz0MQAoLk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.bc113605.0_1610585101141_0.04685371650664649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/snackbar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.772cc1068.0","@material/rtl":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xo818Kty3RHFcBA5EUYWkM0Aprj3Dya9iC3FJK2rN/V7q04596vOvrrdQ2lkLXh0GULcrKxO2GUuTdiqi974xQ==","shasum":"203dab9ea3f95adfa50baeda99c9dba4145f737f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZZCRA9TVsSAnZWagAAFr4P/3M0m27tqbGBCNuqKO5k\n+5g8yFSuNnwIlr3f6MpdvX2J28BJ5i3J5KVbR0EWPdKHflwmWwZodcswpy/i\nQf/WUu3zhQ8pDk4K2KcfKNYBHuNwZPtfgZRL1A+ZlvaXam+/9s+TNYsaRmxB\nftaA+navnLNotJflCO1SwlsP+EtcuKyfgzpI8JWRapcFntDqCiwe1vYTZHrr\nKIBC2eVAGfLZGY/KJYuSqa0ZYwlugxEWToaU3UssNUIu2DrEb0yTvTg8/pka\nA4O1+wMbMSgb8Ehv09UaQV7bzNFDn2FTIYP1sPPWq+LUDmrNypBJ0Aw39xZi\nQkUfgxFV2ugeQ4GfErk5PMVaMZeK4X8j01ufw6R3ODJsy4uR6P4cO2wfxWqI\nsBzmwC741yqZYzcElic/zRHvOzBfLgqwcSogwKBPjZbATOsWLKTKoPR39n3I\nFAZGZ0OMFos5aEgOq3kznrYXmgDn/OxoeOHdj7VgdvoGJgcUAepdZn9oMtYc\nIchOe1NFf1sYsnxy7BV5BOvWvN9NFY1oS8nYoBbzR6upsPjMQCJyBBYO8ipY\ncjqBjYjboQihjGqvIi0x9qdU/fulwiiONtTHj1WplxFUsd6Y+rVdGWathnpl\n25FqlAZGEvsgA4iji8PmdzBVssp/DG3AiGNRsAi9P3BiEKM7oxbZhsV9Hmsi\n701P\r\n=NWwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVDOeEAvKG6OXbZMR3lPms3B+Vwwrx1iFQqh3k0JlBAgIhAN6bUou3FsYkn5WPfVGQ2ltFaFp0/OeqDWuh19dE4GXi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0c1d6ff9.0_1610741336571_0.7154845572303317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b4332e00.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/snackbar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-6J1Bht4XnmrTAIL62w6yVBlmu2PIzSLk99E9qYP2uy7pjk7ZfqSPd38UlibLi/+Bo/Sv2BdOVPCZxjDqEcGBkg==","shasum":"706d623aafc0ee783cd9a4cf11c82b7b1c02ce4f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b4332e00.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIQCRA9TVsSAnZWagAAX9QP/iQiRKzGx1W6pVLGQ2Y4\nBK0PcWYLeRxtmZo6SLC5sUIFndopJRScgWOIBo3V0GOgvLkHGHk46i7X162t\nWaRGDUngvDqmECn9kEZ9F72HOY0DbDgoY2a9p15woky2lZkli05DaKinnmRR\nvEjKTVCMB5Jks4TAZ+JjOHNwq3mSn+WutbagTJ0ElcmlX74/Fk+onH41RAbT\nAJssyFEl95MzD2nUBspnVEuYKGTn7ujMFmgzlQ9D9xRzX86+PHeMV+mkH3ju\nmb5YagQDwBLYdhXDnJV0OGTJ9zSNMcvL5EoIUZKL5xHUcyA6ivKCtFCebRWx\nMSzCxT69lX5GONaKaW7VsRPuapywDc15g8PBt+5kcXV9HIXakjjL6XlQFtJ4\nyc4iZSDe73MOe+L4VwJyDKu8OspMbGzSdMAf4+S4pv8hacc/uKFvKWf5FxMd\nJDbRi3udTsfNwz89Lxw4s6XtJFATy/tuAd2jR5RxpREpOlnanJM3YQ5OPTQ4\nZw07/rJ7VAkZFcWfOPlz+KciaebiGe7Yx57AZz1/eQ79u8+SWfksSDlfx/Nu\ncSi8bPyySi3pHCnpJMVubL1ZsZI96sRBQX7JSB7ftgDJXDfWRsNoNzhtmkD+\nQt0BKVbBSxWSbmh/GAwfRdMfrqD2qDaybwJhy3oJWE4+FFh233j9r/tS9sym\n7xLp\r\n=hWsX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3vKQ01SciLymWRNoPc2/+Pqf3b6cSWCL7vnGKhY+IXgIhAMwZjzegbzsFje9d/bf4ou7sCJJNAJ4O7oO7ywLJ9dY2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b4332e00.0_1610748432282_0.5836560390531806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.2899691d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/snackbar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RE1hMNFXjWPl8kYTxjrp7J+wWPr0o5q05OuL2uDx0yCPkvJHd55sa8jK4RrfZDyle8zgKKg2zzOCy5rrU9kPRw==","shasum":"c9361ce55db1a31224c667fcd4765014bfb73d48","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.2899691d.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkTvCRA9TVsSAnZWagAAcXsP/0GopXBzsbgZxzaXc7LR\n3fRrmPRq4oKJ35yvan3lzznLWcxKeu5UjfC00EPPeCHqUuoiukDyg58y9rWR\no8lbGO2KhQ4edEH0pO2WfN2qx3aB2WmPRU8WH8MWOJCXbfQiFFcNrr2veDKJ\nWeH5wQXE7pKRUYFC1iAq/cHuCpPXFlJCgRxI7y62+7C8OIcdfr+9KQgmIxBB\nPHeU34r6a6Z5Ah1+byZz32eEzcsnrr0NfMJH512usyppD5SRzZjJnUl9XqBS\nTeZVSNbxKXy21Bnx6UXt8+xlqMvyCkU1ZSfqme424eqlhmR2ZP2BeVby4OlC\n/jqiFN7o+XKFV4UOYb4PFo/AAPahLlkq+jpr5Bk+N2Pz0dgzd6lzWFdr3P6y\ntSiC0BDYrBHc34UBKPxa9xgCc5riIJYjJEHhmR5dNKKI8TmqOx9GdRQ1QImY\n06R3s23g6+EU43g5ZNZb0Yy/A3N0Bv4gxfTUD/ZIYEt1E2f3ytFdkrB37bUq\nj9uqJuHUKC+V1684w+hkeoj/6VGj40FNFN7W+m83dVngfOMfMYpg+FzhWVoO\naLsNXqEXLh0kAgSYROcDBvKIxKKhVb0OGimnURj2GNsW1ZNV28Vp0AQsd5Gw\nfeIhizm+uABzlapglOUN0IqwN1NlYTE+YHbfT0tqhfgkfKiVXpDSDjoekSlt\nXl00\r\n=g+J6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtQL5/YQYdY07PQbwNwMieorxM82wBOrN6xIdsYbZJQQIgKSsVKA5Jxhn1TyiFZvKwIXnhuIXbRK6stkjUm6AQxr8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.2899691d.0_1610761455191_0.8048950078229584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.fe73953b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/snackbar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-+lEhcMyxWQBXqlvJpI1X8RCe0kv0qlpjXeLYE1sHzTtZYk+3YRVp1Z5upkID9C780Yw5PFwIyecz0rPZkR9uTw==","shasum":"85db42426653dc88589c446b29982e822263ea6c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.fe73953b.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEfCRA9TVsSAnZWagAA/OwP/RfqY+wGIhvBu1I4BsIG\nIc8c4rddwiaVUR15vp4iiHmTmjLMK7hafXkvFAjrzBLPrG5q4ZW5buuuuBb0\n0nbGVXd/rbuhQ8Duxc71Bpmk1JSO6ivcDouYiRPcZ+mC3IMQV0uiFtV8U+sQ\nQz0v1bzVBlvETJwekyHLyubwW0feK7ZfQXTEPNSsUkh4nsQmu0iM5EW/5yU8\nwdz718/LMLMi2UBlT29pKIDS89qULhL/ulcan0J23i6EHJsYdp/VCjDVJv98\nFPILICymBAYhPI0ucMN9XWc0UB9dYB0NP+8LUN/G3U2Ob3zlJGWwyJOUm2m6\n49RLiB9z1VLJ5zcloxWbLo4jQsyYC+t1ZZjrgVpQsuhUa7POQDiLnNu0CmD4\nZK8efV4/PLn19EGqjyME9sfWukTzFInLXlXLQ454/wBT7brX7AQ2yRdL+ckY\n/UYRJe/zDDxfK79p7YaNa5QOg4ItgWRlgxXJIh7d5J4bwxktXSz+EtPxTNpx\nMgz2pSu8XSHx/E7TVJuYe/VxdTo1qyNIkirxpoHErC3tkz0ApiiWldVZ8kmY\nC+4K6Vpz7p1P+ts8ymwIjDhw0gMTP2SjUIsGPjIFcp4zVyezCaqRpyplco+A\ngZzjPRop919M693BgVJ3qZXXDZHeO9MmNRbyOjUOAlDrsdxZesz2LPWMIVBR\nNBMy\r\n=TFow\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXnj9jcJAe1jWDTNFpeK9aWs+SqryJ6QYq4SZ6nKwgaAiEAj3Dy46NGIRtqB/BRUMSt51ZPSzB1z+SekcL1RjvsnLQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.fe73953b.0_1611084063399_0.5207975131746316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.d3a16455.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/snackbar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-+t3Ihmh/lckhs4A6XBa3sC1dt+2/AE7xP/3H2IKsdqfPW7raacRpLTh7fV2so8hTTze7XLogVH+Guyi801hLTA==","shasum":"21f6a8a693119924b0c7ebd8752aae6cefbfdf03","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.d3a16455.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzheCRA9TVsSAnZWagAAfeMP/i2oE6uRWks1xR6rrtaP\np/VfFBlC+EuPTE9SFuYPjpQPmptwgqhQLfrk5aEEnp8feU67wQnpecZOPXKm\nAEOWXaldHT7v7Bjv33AY2dK5S1Ymy7nGZUBgyRQfSl4HKBfOCjnKzSojEf4X\nWM8mNuPzuNexsmUfMF9Fwrri92o1hbZQ8sX5aVobeT7vBnTrWlkmouR1iLiJ\nIQfhO+10JsigRK3dqU561y4Ipb7B+O/+skM2td3Yi5KdHoii3j9W9Q3Ks2PS\n2k4vF/pIPneYeT11hKDcTkiMraaK+ajwCqdbzER5wfq0tJMzqpRDeHJ/hDJc\nFT5PuLVJNxonM4Q1Y/L6k7sgJa7hRXTwC2GBI/1oibp6snOo9A7jCyix3Xe8\nNC8kMS10Hdi55S0Vp8pfq9QWTPAEk7Uo+odelhAEd7nno0piSoIe2rJU4MI8\n2cBtNdLJF1QbZGYAVAoeJaFx/4+5UZaIFPt0LIVlCMjIlVX9YXeaMTN0Ixv6\nKupW3+8akK3BZrdD48DoLB8p7xHnD/d4J1Tzwp52NwUWtdLAzmSaElYgyHE3\nAt9DA040PnEgrN+zT0eEJggQXzwhT1fpjS37XTBzrf9EELkqy/vXbP782K2V\nUZV6v2hSDEzXhiwHfB+rlEZ4tgkjyDLrzRD1+8SacIoTkFio2jR8TBBCOTgn\nAXri\r\n=vFp1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS1Tp5Fhb5ooQUhquKxmjVCt4s059h/8O+QitsJ5DQrgIgcHRoTZGVS5L463J3NtI3dos60oHGJfDsBj+LqUzgmeo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.d3a16455.0_1611085918261_0.08767309676224944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.597ca1b6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/snackbar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-6yo3cZk4k1WvXnDJ5rkzFMIJijnc+9wl19QxaZxwd+em1dl8yogoW+R204uvOAEFDIe01McdSvNN5fzwnQ09lg==","shasum":"edecebe78bf06f1f4c8562340c913af9bf7bc0f4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.597ca1b6.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4B1CRA9TVsSAnZWagAAcZgP/R6sNlmJxy90PYj8/pIb\n2Ux+xxHWOG6xgpNiknlDnXiQxfcqNa9WiSN085Nn4YgK+eYMlVV9lOBgk/G6\nOhGvkdi2AfKlmXDaghXcVUVMu8NYE9VNCB1hz7xE7nLkplyZ6fu2CEilNN70\n1i0DQnC1Ez1HnQ1025j28ZAQZQsk2B9JYe8G599MO/RNcrJd4cl4W5Sddt7T\nvN9zgb93me/fWcNkVYauwT7FlelM9AX+u7GD/r2kXopnZiBxTbn3Au3cMs8G\n1Y+2OKa+TXjdH0aMzg0ykSPH9AkdLf1fExsABjx0Crdzyy/eyM3LQdrhvSDJ\nOJxeb++Tl5BFJQHTRwaN0yFT5/Pe3fbaYsxlJtHlITK4pm3pyZfxi5tXqmJ+\n5aFue33nwbYD/zKtibPVZU+U7z5XLz8SBZrCRw+Kv11SGQpM2XxxdCpXYno5\n3UzvP1OPTdQ9SLtc0YBBrRSDrtkNKWamu6nzNMpt6HWCOeXXCDuw+oY4w/cL\nI4cZmFK1XZq7Q/ffaM/Ft/PhkSzSiNOTg9TQCBkPg1MXKZdY+aIoL71ckf5X\nMjsuV1RUzOBDyG3HQDUmpRePQKU4C1XLoI+BXxvauiFxGajQeF8R6gofVNaz\ndagkpp1cMWDRC03FD/CVgj49JyMMyownhkMcDrInAgrm1k/qiqT8O+CGEiOQ\nLtvy\r\n=r1DG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOIViLqAXHKPTiLury6K7czPQA5KmnAQNTjglljo1SfAiATGsGBBtzkyWQwYJiVXYo7iqucn/1zKnFLBI2+yj3p8g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.597ca1b6.0_1611104373026_0.6552447788791924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.3c195efe.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/snackbar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-O9VQ9iq62hwIxk286fbvPIyxf9+ChW4baHh+ETebovCbfrtDHLoM1yviCbnUZYnGej3sw4oPI+NfPtAQEHTYVg==","shasum":"a9c96e5ead9e665e7f0355153ae1997f64fe431a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.3c195efe.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47mCRA9TVsSAnZWagAA43QQAIXSyrJ3809XK+A+crSM\nF+tv6whz5K9NNHf8cM244LVIttS0JmkeTCj/kU4ZFsytosOsON025w4U2XCk\n9uSZh0mYL39neQXVND0v0eJvaQdJ75qBMRpWoGbiy/0TGcX5A1Ywk5QYjHRF\noQw6bz8QcUWcfO47xrGr0hzKBwexL8gK8WzBsh2lSBwVgaXRk0TjOI9Zs+2C\nT6ztHvSqiZo91JLM/7YSQhzK1h+cxlAf3DB7/oxgM6HhisfZEZd1AAJ0E518\n76Qpag3KbnPkOGSLg14E0WEfL3ILbfl9WfEDLb3j1aod2QJcdKtqZqdnWiLM\n2/3N7xqHvjj4iIdWh9ZS69Q9ZApRnRVrhr3AlmKZjYBC9NPwodap3xdhSKr1\nC3Jw/33H19YHHrwRWGeOU/grFgdI5nlqYRe2swoJmt24eQ4FXDzEN3+OsHDj\n+gqkar4BLHX9y3WF3q6QKhbu03QRafdMFcumhOVovB3CSrlH277jd3VIHYvR\nKgagMCfVE8pGabEIzQ31VJAjVzTI1Dhy+6A8hyZVFiTKD4AosM/DK5AAnByZ\niWufINUfhzxGBi9ZcKwSl/rU9aoHwGpk+p4KMIfCgSxUmfawC7YjeF3Y9ADr\nrGTFXMcxnB2d7HXHFARt6N1lMxV9Ff2UG1CheshoRbfVj7cbQFYYY93MYttU\nLzF4\r\n=MIGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkFIwKRaXXsJCj36zRKODnWjhMi4zilPC2ZkWNGvTLRAIgdwDi7sSKVJ3S4L3qKIllzWAIkFCv2pexsfGahzdF3Og="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.3c195efe.0_1611108069640_0.3207812297993604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.f7b8755f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/snackbar":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.0c95c9f7b.0","@material/rtl":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4jNIerqE6BPZCu2Vg4irt8Ub3Gc0wT3rmDdlops/z1/rOBKE3zY1sNo7RHeMXnexNWmHvav2jyASKSqJchKlRA==","shasum":"2b22e000ceedcb5ca1acfbc15b23afc2761dc29a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.f7b8755f.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSACRA9TVsSAnZWagAABDQP/1jlG/ugIuV/Lu5joBXU\n7VMebLTpArDN3Uxp95JSpCsp1LaEn/lA7rlRU8mL2AQG7w+WDRXWngGWtU6x\n9dvrkaPp8bz7/SXUItEXHmEJ75it+ETgRkXXmFjnapYq0WzB1AxO8ncuVvll\nAmZ1rKzGJrjPyJvQyKCIDbMWCu2pMTMkQ89T8aYSrGA6qm++bQljiSmi622F\nJmrjDB0wC2p32yBSvwgk/XvJOXUXEkB5ueV0fxfnKxByNOKPZT1uhk0RZswx\n+hPz54XE7QF6KjLdHiKJsh3GJC2J5sjbq74pug4D7ijhJdCGeP5syrMX7VaS\n+7lKfPofm9wNURUF+PdNKyRVBNGyjx/zFd4weoIKxB1xiI1oStHIPmYknxvb\n+wGSJnOOKfhF0MsIdrXjYh46yI6GE3nsZ52SsyadecgjE8jpdskFsNqoTpKh\nex2CHt1fW4+1lHaq2TXwES/HWZv06qQqcb+qJkhsts80APLckMV9iDg+Itz5\nc17zu2eeoVrUj/Lhoze3O77Y4PGMDZ7QKilWq/6a1bUguLjOpLfb7rNNp7dg\nK/eCLKEomJsD34EkIqb/JqrWUR2bALLFx97lhVfHjZTwaZbFCZMlDS1Qyotx\nvUWpE2L2qxkbcNCksaa+C7XK6ZhOSZB8trB8Y08KaPBjpPHRu0EhDSBx0Hwx\nA2Ue\r\n=pygF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7ZAmoSUzieuSwUTVVzQCnSXnOT8vKTb8xj81WoW+4igIgY8oakIOzy9g9x0HkknIfvqLPkT05Yp15+1Ld06p8OgE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.f7b8755f.0_1611175040477_0.4357267120191586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.f60de7df.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/snackbar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n9BLaXvAdFb4vtirsg+k0nA2F6XVFBFBXmnQ9ayqf1CplGuNMlv1SCKTcM1nllklbIdpkDa/EW51isjPfpBkSQ==","shasum":"7a970cc58442c13e307f29afa5800d3c3251aa0b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.f60de7df.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL53CRA9TVsSAnZWagAAELEP/RHLtAB69tplkYgGKVl8\nVtA0ZYVeCfy8fDo90q1eyUMtqochFFBYX4LS076JsdT8tpOb778o6cWfMS7g\nIw8/hdOInCQS7URswNnLKeT0nj/t2T540W6Db0rW8WqIrKzTqX2UExDw7aW2\nxGCHAmBN5lN6L7TrfQCZ2OtRXieTp35M057OXm5zp8hcl4i934mgzYzbQYUF\nB+xzyT/hM2fnFJtz6Qxd5cRDqeGFLAxzsc0xhn2nEw45kvkp2S1qnGt5/4Xl\n2Z/cQ2S1Cn2uTwjAlE5vpV7X3mS/57SQi6eEWqGLHP57anYJGDBLkqFNY6uR\n7zPQiHgL6GDo5YOZv2dWArRSPm5whuB19+z+APB3LmQ7Ic/yNjRTPE2tcSnU\n6fq2mdlZaeuUX7ZIb1Hkx6x88GWwH8THfBG5WJUp8RqQUipJ0eVrDenxLP2o\n9xWlGSnIUtriNi6CcXJxW6ixKOaYD1nI1sn9xDmNvegtB9RcF/7qNHq2r/e/\noeoRHJGE1+uwG/qdtPyQcrsTj7Ir1PLqWczcDdaSewCbIMunXwbpvGMVehN4\nw97iDNRbmZjjTl+2nKdIxOrh4ZSFgY12Op2VPG/eranJfP5OStPkShh7pRbH\n2DndS1OiaBUo9od17lEJMCEfztq2tSyAKyhZd43887QPRb3ldDGIroYz/W2t\nS4eK\r\n=wwps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmPBnBU0hGsvYXm+57p8M7lFGG0UoKOArzTR3DkkzPQAiA6W37jMIwUA7MV6cjEbGC+ijtcq17MlfT+drEm3ZBPWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.f60de7df.0_1611185782755_0.8152215673394432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.664a2927.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/snackbar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ep0Y/AQgI8icZ+nUIlhDs8cMbSMz5x/Lw8cAKSBDYSgbrgb6NLTyaws8HKH01xkDbzs9KDd+d1Rg3GWiLsakiQ==","shasum":"8e4bd7fd5d2c601dba57bbfc4b5c192e5fb4ce71","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.664a2927.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdN5CRA9TVsSAnZWagAAvugQAJ9B+NT14BLTjPKCvbbL\n70YvMwKrXEHWZzkG75DbCMFlfAj3GrRl3JBAUYlkeRj1lvfb6U5rRATS60t+\nkQxVyWl1THof+PVV9o5iLjdqTysMO1TBApUB10+EMiesgaZ6L8wSoPJEak9K\nVuRWRFPwkC/gFRxhD1jmlZQl9QIIm+C5D3GF9kBon/Ic5TdbZFwAn4jmTLHM\n1DPX+j+PcNj8vmwxJ603EBG//JtCVAe/rL+hPq7xJZXt9gp157otUWa+7Hqz\nYQxPyIWlZNm4oYjQyRB4Oijt9u86T1Tq7AKoNxnNywRCMmu5XqTAuRp7xJD5\nlQiUzDuRXZn8mqyJCLsqkrvoSl5JigfZ6Oo3ymHbQDEFdxMXk4Rbb16r1zmo\nqi36V30kr0s909x5GOLPOU7qSycxec01+RdG35xGPCs6KRE/T8YwzJz+ygV/\n2HtE/bEMkhYrYV2EGVUrjM29v4WA9xXQQOTBmpLBouBARqZpcMfoeBd/2fFs\nVX+PDZRNXQHfIfCi+i+YN1FhdkkMaNvd7YPFxeO0LQquB8s3G4JiEDYYn/u7\nAFSNlZjMrPmc9hDH9w/1gdlVwhh53Um2IVaScoF3aoqKZAXYIAFlyzL03sRp\nG5TCIgwHFdLMuACjaIYij0Tk5ZA+dWp7nJ0KLzhYzHC6Ew+qlPCJkUcDJB5c\nesaU\r\n=AEat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+bZ5C3in2eYlbJJkVBSgDTgDT1KioMNqzKrg0wVPA0gIga0MlNIgAclDdkBKTJhjXhjM6PhyQ2y8sKoz5eo6Zmo8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.664a2927.0_1611256696896_0.8617694359925765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.a6d312e5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/snackbar":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.fd61b0476.0","@material/rtl":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+i7WvvvrvVGJ4H4Q4XDH5tT/6mVFUwEgGMI79c813lRDIgZOWzwe7uE+2iWfok+EnwjcyQ49ryn8EC7TSvYK8A==","shasum":"3023e13e3e292c107c4e5a51820b334c6ede671c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.a6d312e5.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZjCRA9TVsSAnZWagAAGtgP+QBw69kxGfhzB6Vnd+yt\nSUBnfVKWdWCt4bIwfXsdqjI3Pyp3qNxqXNHkIz1AgC6vF2V81ACoD6Hrpx9S\nIYKSoAwUPuDnItF1gLsCpFavO6oQcZPnQ6SrdF2qP4E12CPCM38GKFzsJyuQ\nMHRh0ZIXMp6PdZonBVrS3/JMxYvhQa6xGzFM5LwHqKB93o7zyVRvtYRihK43\neWsGfthAQVilrHzE2yjiN63YRsOf+TvXmefJF1hzuMRUQZs+PA4L+OrB30zt\nisooBxvnUFUuum43xnF0pMBaezmc53tzNiuUBiqNH+A9MUse0+XGgdg0sjcp\nRSjj8zxrAimL/EgdRve8GZ05V7dpEG9Dk0klwmGadPo/MdhxqR8snvWeQknk\n3V9lwBgus9jjsq3PASVhd59fgp3MYgB7khKeavZkGQcbxInTao3JjJtS5YOT\nKL+U/XavbaGFpj2H2iKfJ7oWuqRu3AQVNo8UbPIWBOPlERGZuPLT1pv9xAQ1\nd2wGYefrzuH3jzWZaxsW/B7GgxnuPBJyictbDp37XawjvaKTcTHfZj96Vg8Y\ncJqK/GEj3XvXgCz9bxsA3jsb8pTvepSXdVQ89kJJmuxrvy3Wg0/Ev/Vt+ARa\nwCMYib6vBC9CWsOkUVZC69Bxn0GUHakVJSXTFrAnpD3OoVyv1abcfLoyHVrx\nIkBr\r\n=ossW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxhZ+ky6NkC3WJOpAlT1dysjfSWqa88kdq+1o8/pOnfAIhALQwXN0+eIdtpRrBiiVkEyuS8StR22P8KdyKDvGu5EEd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.a6d312e5.0_1611265634820_0.7033110194680312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.027365eb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/snackbar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YUYde5H7uGKJptUzT6K1SK9MjDaCThhl1iCihrGmsFRnM1+hNctrJLmLIBwajFlBOc7qHwiyCnrw1ykmo6JiDg==","shasum":"3c5aa4502eb197b18ded816ad94398abab649570","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.027365eb.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6ACRA9TVsSAnZWagAAi44P/3EzPAV1Gy/bBDXhw8oQ\n0PjqtYMnLKSFkPVffbksQJLcrlO7NTRV234JYW1wrnCGRiEsfHdNNDggxWgy\nxqtEWixeMOTXJYeOE6BvKQRo3TS/D5AWnDZyKJZg+AFecVOFQ3IpGFqXQ7mv\nja3CB8165XALHwbFOBCfz7uJOWIM5pAQivvR8FAu9uD6DhKMWU7If1x3lRdQ\nL7NWdO2tszuB5EAYsPp3XbRj7yAR6SlrNgEsTgG3rHe6CsOv2pNLyVdZlayp\nDaQAtZFPTsuilHxgPCV8EofUGAufqrZfe1rkr1MOUBnijJ4GWzmVR8hmnEiy\nvJ9wD1h+LfN0ZJvgLFhSaui7o1Z5Kagfq5dPMGKsy3+ChQN/rOaVgSJ7HLeP\ncquaOKF8HTSsG4eoG6ZWDP3UBuSDrh+iYWd8g3zWyxKzWrJzwE4FemGkxUA5\nbLcY6/ZQyggBBqrFmi5QKyG6aBhjoFYtxjxGAEwMhYWYBp1yaJcwRDIUk0jh\nMUKSpxBtoYA7UjLf9rugLIajtj+tG50gie6zbhMV5vT9axb1+m6bxCeiEgBI\nkXhO7p4NlbwsbvW9G1p0xiGkPnK2Bvmub91UmzsmI2A10qtW+YRlEpoRdj/Z\njebUzh5NKbEgLrbyPVmbzWd+V7qEgumkbzqeChAFAJ9I7ndix68Mp0Nktxgy\nmwpp\r\n=MuV9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS5UxiUNWdiq46XLJOTUK/b+dtwBC6bagAEoPxBJTbqwIhAMrx5XOdYumUlpA5Nb8J4s6CeC3wl0b0Z+XgMc1CgiBs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.027365eb.0_1611349632191_0.4145752988039726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.7e72b66d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/snackbar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-CMfCVTOYYRsCcl8w2eCNstSf+sX6p/U1vi8QgI9f0SFff3KZ5Y2Y/zP4blT3kfJhqzPJZk7cR2wYN6I2iOBQGA==","shasum":"c55f9a93176dae5efd88110d86a6b906db1a368b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.7e72b66d.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18RCRA9TVsSAnZWagAAaC4QAJFVCDQTJsidr27zssqx\nlo/yTHKsm2GOZkXUinSx4g1IXvxR9bu0bfYXVXpnq3hRO2pIujJs2oXg0R8h\ngtpEjZkrykXS2RtTNLvQieWBlVLEZDA+4mJ8x9vu0sEf4fP+WOW9wt2Az2YA\niuRJDOr+KuA0fnbpxBifA00sglIjhi9jhw6gYWmG0TNY3vbJW0uOyOVVZ/qe\n/LkrA4kIn2mpF16z2JrRP/X6JuQPqR2idh6C/QapTR+CkyY3LD02Q+MNm2md\nbCgntFBQwHJn2FGHmifpoKqXD5uzfD3RoX8jTAkMBIN6ySuzLYXc6y5cn1bl\n9xgZzqnIost2xlTCthkXfIN/aWRKXYdqRaY1Bcrfmu41ee6679CB5b+ivKYG\nPrEBq0t0PxBLRwY7SiEQxj8m21JZe03w5zIUm+dcSiRcQ5r6zFFPG03CV3S0\nUbJprmkcYRNWcIoK22dHFkcsbguyMZGNr5Pz0oLh4i+xbe1GF9SsKSAyGval\nwLeyr14DUBFLgNZU2c++J+USBfXTQIQkNho+TVZQ/8/78zViz3c9KJb7YzlI\nbTkdM1JHic8yfIKQCEJ86NQK83APmE+dcaxzQG7IYwUvaeaK42LjqYozw0V2\nBD+okOyM2I+tFBKMmPFyTHdhI05SyMviC5ASY1ro/fb0AlrKq8d+7JrvhTPE\nFS/6\r\n=B+uZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmgtmnF2Yy4ceskdQhJ/amyDKPpnyXspFHcQ0XZtBPHAiEAmg0cCal50BHP0DP+GQBkD+W20H2Zc8R6k99f3r/fjv4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.7e72b66d.0_1611357969085_0.2493427996259323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/snackbar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8CdJs8s9FK+Cf00T08ZPjIRgBAaBw4KRGExWTcxai3VewozszY4tesgIFcBO4r8A/Pbbncw1bVKPdlVnZR8g5g==","shasum":"d8989b1d308fbdf7fab0cb098708a180cbc9dcac","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CNCRA9TVsSAnZWagAA7acQAJSHbHwBXqqGAmdNzANB\n9SUb4HrdJZqkpWnBatFNJXP6Aosa6RhbNV1Po/Ky3fcmhRxGQZluSJEBa433\n8DeFt6fh0fJADsOh3gQ4lgHVacoyZYkz0qfK+17UXGZSSALpZCbme7codtf+\nQx89iJPk+MtkSzynouqSfl0BFzQFFJtF7TSItDE6tueTbjQPFdNu1qSdmwjN\nF/GA0ITf4z6JJ/NPQELQA4ErMiGiohJ3lNuUsQMWbawc9Zn0ELUttu8xWmTP\nj1PVy3H7/vIwAi6KRa9gIyzrSA6skGCkdEcRRNZa2kEP6cN8JR9RjNeJrWrL\nVV6+1HrDZ0lTHD6pGoakZom55us9XHaAO/N+AKUH3kOzbumkkQq0yNS9la+m\nkSotJoYHB9CthyN6umKyzRkbawUAsrtWbyyAP+yA25OKjzOpe30UFS4afNg4\nZSNISBq+h7agaONXSBKeFH+8E/b0kO7duAVT8QyZHjm44uRMQhixkVtPe9MV\nxADTViNUogdcY+Fb2vFCbJKaM8JY3vWgHxnqS4/edvkWOqU5Q2pC5PlhDs6C\nXu0uEBtk6wJz+qMZQ0CU674KwsrSGlMFtgPlaljvSapTW0iZSndR5uy1p8mn\nYBu+tG7cKo/m1K7OUP1i+qEiNV4KBSNr3JDgLv+kxMhNAr5fHDq4kb+NWb1q\ntjg7\r\n=8Oaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGabAdemkJZ6VMrh0mNXalebXczoETCBt1E+Lah+4OEwAiAUzGa8vpZSHjBXQzSl9lR4Gju431/oS5hBWaH91tDwoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.a6d6a1e7.0_1611358349147_0.7263392309853729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b95fe100.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/snackbar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.07deaec27.0","@material/rtl":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-dI9ASD6qpJgCG5PmvKViLMDEn4aYtA69vwCT38NPu27JANL+70chS5TcuRvIN51Btma6nnbbkCKl+6K8l9YPTw==","shasum":"d2562622b2ad5241e3ea481945ea4ff1cdd0c0bd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b95fe100.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UJCRA9TVsSAnZWagAAxQYP/1uEMet//m0dGGbsRVZU\nB/ywiee375vplTUH6mXqMR3pzMEII9aZp9epnq+rjgIOfvqB6jytE2MOblIj\nYCUNkFwT3XKmgdT6EEKOM54ykzHaNn/aZw23bh0uyJhMvuXBBt21Hn2XybmW\ntPfWvZD9joPruqy6h4HH13AmzLWlP1/++5wQKVxVlKw4fdLGEzdMLH2EY3RC\no8chu4hVsGtj4ryZtD8bR2wPE5RgYvMIlGPvBiszzcGGA17a0Cl/EvvB0Voh\npiN2OIMd9RSbknk9iQ1nH7Uu7H5wjKo8XLVLaq7pQK+JdXheEi4+7Hz/0GUM\nThxWZR6ZPwY3u2ZsnKhL0FXl8OCr1cgCXHRKOmjmTsssbdXoE9jXfoDuR+gj\nEaTWiBEBnaP6Lg4UXK/VfXZG/R9Cyf7frLzG2VJPm6WclwFQ1/yj7Vu2AFS+\nK0Yc4LiQ1GruCDuwOi/IyEY7XgiHPrc05Umm9i48I8DRvJQTNgouOnmLdbra\nIDpWB0B9wfZFvKksH3v0ZEBP+rh4YaqwvWgyQSSWGNpODdomZ3TNAXDbdXeH\nDSRH9Z3QUpP5u2aW8P2eWWbquS8LgcxV+OwoWFRHitl9Pg+329kfD5MIKVPS\nftyI8Q/4XtVpAZFybEYbnUIXeU75jz54SDrS8WuwyBuXyPARhE13HuH2TbiN\ndhvd\r\n=lx9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFs0YgMDNMDhc9qxJBsjWXtTN/5wd5enLHKiR4Xi8ElWAiEA92pENAiRCno+4YrT74Ac6d9zOaGmAS4jcBkz9rrOIOM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b95fe100.0_1611359497003_0.38167376919701534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.c8797192.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/snackbar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZOLdJDjGdwThAEyzn/7uvfNhctgi5uDUAFX6Jhkf3fITPLDjwNJUgjHaLuNLKCzb4YF3L7cyIU7eRX1movsN5Q==","shasum":"9fd55b95d9be794ec18665274db9a96fbade35e4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.c8797192.0.tgz","fileCount":16,"unpackedSize":67134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ikCRA9TVsSAnZWagAAa1IP/jctN7tvOs45b7Nz1/uO\njsOABayZYHK4NP9pEH4o4vDW+SVuhP1BkYCOdBOGsMVCMVjDEvGvmdaguQT6\ncsqymP0pmceZNvJO/2MHqaHn8LjfMwraaIk/RhulttXoQ6mrhugIFsePC7wT\nem9CFSKu7dxt4XJZt2mDYDsLpETg6jTzNEYWUiZkZ/WwCIgeMNXhFgwJwQwO\nSLicR9h6Xym9aMicGy+Qg9NF2GB1PpN978ZWn/jg32zyBv/tjf96s7jfg3Ng\nFoHxuXJWnsz1CxsCEyxz8QzRl/lGYX8AkZJzPDlIqkjavEgS5LG9fzYdOMp/\nmUFLO9OFqQBibMNvD1MLKIk8wJg2xuxGwFkiFBNzgoj+UmeSdlux1LCfD6Uk\nJuiiTEGjAvASHFmKEjYXUbTKYyH2f+QHtBnBwiTWIP+5H04GSQihJE/oDQQc\nqe5SmW2D8ArmDMD0SmMsO5xSW9rA/FiKhFI324IRlYoXOL6CXCPUfmswbJ4B\ngDx0Im0q3njIbQYAJz8zS9olJ8goIzGixELEDO5DsmT/XrerrhxcK/xQNgEY\nDLKIOpFMCEnupkOTXOtY/MhinTk+U04yt7U5iY+AOP9UnNEeIDNTZYDHYi54\nR+DjqMzBdNJHTSKUXKuCi51oFs/fH2uVcQXXTzttmAg7LoNghUMC82OEgIl/\nxNjD\r\n=MWva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJhQVHtpdfJLKnPgPx7Ltp+/L1JXiNJ1pI0eWRy84bHwIgPOqJHbAkli72I9w6+QYl0VyJloWefRovxhAV3FCsBCE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.c8797192.0_1611360419761_0.27731398097642046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.946f5563.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/snackbar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fpZAc0DhwaWWUEFYpt4lhPNBdYKyT4lJbPjOM5kfTur5u73BMMO7/PImfArOsCKTUJW2Um7KtBDSsm18XL1oJg==","shasum":"ecd29f286eb69f3e677f703dd43d3689dcb8e9af","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.946f5563.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EiCRA9TVsSAnZWagAAmLUP+wXWMetYZNqmw+L6D+tG\nMS5hNKD+krFmAmKfNDBp/OIOLkhkuWS0Xfbuzr8fCdDxG+mnfIfUoW8pHaNU\nc9xv+epFcbBAd5UvVqkjxPq0om45hEvx//SThRV3lR2O/8yf/xtOHPQJISz8\ni021Ck89nMyd8Za+HzOQ0m2PQV7eQUz2b0Y7DCieSSY/da/A/434DcTyYsD1\nnzq/7YU+JYBy5JFaroduFMbh0d6QDlgCyLd3DVPxnE2OzzCKcYE/+GTRDDCa\nOU+myqukXPRzLwn+qyb44v/aYDznD4ku4MqjI3Hql5n/3RGZysXMQNDQD8mX\nzRanCPYtUygKUv8z4SKPv/d1qN7Ls3G5h82Stsv8W8yG1YnPLDnozCUUhr4R\n6Rhox8VdCVHIooU3oTJ/KC1PggSj/mxLTaDcH13SyeUtdpw8YflSSIqT2hej\nDSbRySZv+pZvof0eXPc+fz7K0ei5noTW7PIHBSIRgdHkDfWFRndIeYa6oaL9\nLH1oThGxW6XDmUm7BEHzbv2YiKrjmVvy2vBeowpv+0gruxsWYM4LzNuNVG80\nZxxXQ3s+aZX4XaCy8HPAsy5pCCQQhGQHPvPOTSGdaM+9IaBKaS+JqEV0qT9x\n4DJIzRfwAt+muDH2OrcVRJsyLSi33p9p53zW3ceaN1O2jji1gVxhDrp0leci\nFL2h\r\n=XA7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1ooiv99FG2JVGTg2BAxTudrGmq18XD0iY7SvrNZGr6AiBaYLGtaEu212I8a2D5zHQ4qss1ZH2LfnanGz43f1YwLw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.946f5563.0_1611362593830_0.7444646302447229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.43664f0e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/snackbar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-T45Sq5H0A1LQUiBUmQOmwmogZGPcHV0KGeRK2zFjklqDZGTgA2pItUNeIU5r2ckn18PNS8iCsVnzJx8aB9yS8A==","shasum":"c296514d04c2b02815d292cad7f08b3a8eac7054","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.43664f0e.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0ixCRA9TVsSAnZWagAAe4UQAJMMzO+/o0L75NmoqiUi\neQPKhnARZhKkPJQAsB2+RbZ+CbW8mTeaOEpPU59kua/1ci1ggjXbermhonK7\nqJYTERC/EN2zupH5od9FnQS2LjGlCW6h/qo/NNaI5cXrOHOIxBPtUrE4Yk3K\nLliImpfdP7yw7P5nx4O2WERcy82QHyDPq7DYj+mt5X3ck7MV4HWmDlJHlcEU\nBee3eXg7JY0YPeee8wQ3U4KmpJeoNzgbZIylPGpYmeJG8OLD/kMm8dma/Pb0\npZ4EMnF5R7wYKReL3pl5Q+8yG4NPU4hIDGcOZ7WMDDEcSM4veJ8VZjrJDS/L\n8DlTqJdqaz0OHt76NUzpymTpR98JsHmkLGDAIu0rWPSmtfdotQtXUcI2yBJw\nmf+fjxJ6Kyr5TCHALDb3XFzVIJ4jJ1zHFSYI2JytkZPAi4WcRQ9QqGnG88hn\nZDTnJob/UC5O42KWED9O4WOJ4lNb/lcb3XMq8bnU+L/KiIeGiFBzvnT/vKsT\nmNdDo42FYoEVB/UdXD3FGBjbPMopJcwQG4+i128jgZcIHuGUIo/hGz8TRV9P\nX56bLOJazz95sE5TB/cRuzcbZNJQ3Pb2PXI2coaVQCt9HThJygCAZVKawjm1\njKmAmv57twFwh5SmeONbnD+8KoTmHpxohbXnJLpzWxJa0Ht62ce85kn9jA3G\niHJZ\r\n=SVnL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGmKcmSC6pg0kvOS5d3rAgYi8Zx7FYiLzULgqiUC/m8AiEA973iIpTs/5/n8Lol23c0J3TfYGTQ9R0mPinEaPgkbiI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.43664f0e.0_1611614385142_0.8851812552796159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.2e769e3c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/snackbar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VmA/rarPYqBAvdEPF2oOdOHAxMSH5tYi5xXBwIXGhPnOS7KhThG25wECD9DarDRvBdXs2pPSveSCpKACHhPz5g==","shasum":"01aeb35a3bc1d4ee09287844ecfa30b9b5b6c6a2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.2e769e3c.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1zlCRA9TVsSAnZWagAAgUMP/3LHpuNn11xAmdxb6ZZC\nh1aRMpzyMdrR8890WpGiMpRuT64aoYRUGr0YU1pkGaXZ3a8Y6rlWHDdCaNnH\nK7vMf8DycqvyxY1lDX2jIepWpy2ABRoOL33FI/9JaNQmpT8EmWv4uRQL79ey\nsPpqQ6yL8d68HH5yIccxI7yjGRwZhZhki8KgNehdjcHIR70FTjvW3pFY/e0V\nJSlLL0vVc8yt6uZCOJwQZZTpYgeEAY07SzvLN/qicvytP4NCcGGV8JOzhhZ1\nTsFQm04eoSDVmeGhBXNLvq49eODjBejPye45ZhE8Gfgh23kxOPpdY+Pc316I\nUU+1EfygdKVKIjLLYAnUjr+XH37Bbzt//wPBe8PtTBc0DwZVabT84wCs34fQ\nxjnLmBAZSikLAb/lWx1Fn3hVaNrDWHQUQmfc2qV6jwNtBgYU3K7d84DptR3m\nsto9lQ73lmlSqgT+zA8SnaFUdzWgJt2vWfcs97mLpzxReT5+GUXvWS2WebxK\nWGRRtDNk0AuCwa/U3E4MsFLkF+hXXGZ50PTE7lWWCqsheL3V5l+ZKdsoMS6n\nDOXzZeb+zjfvO4q6PLy/pC4nbzTSnnj7AIZ9+HeCJp1RNOYRHhRUFCecxe8k\nvSblszK4QhgWXBFYfKcpHHxKmIu3fTE+vCYLcVNF0Qet/l7b8pIWSTT0nHqc\nokO9\r\n=OXWw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtGF66ogy/BbcR+NKnsZbsrr5qr07uDN3HYVMwliK3jgIgLJgou/p36n8P/arNmCNX64C43CsajbRm93mL7p7rYW0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.2e769e3c.0_1611619557295_0.6175931882927272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.14e01610.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/snackbar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-z8iPrrkwZwiWyiVWtGFePQf2N4vmAwAP6fXIC94C0xbnPdPxZqY2v1OWTM9jQKfdHl1/svnLdAl71yLb8TFMjg==","shasum":"ffe65fc322afb41f85e3f48801a03f7fb464e26c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.14e01610.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQuCRA9TVsSAnZWagAA3SgP/1bp/aw4/AM4SH86YaTp\nDlXxqi5Et/AcaQ18WP71J5xf4HcZ6OC3Qa86o3T2aGw4e9BDz/zm6xdDtxQ5\nwk9cC6cOXvOzrxPHM8E9qnjDWdjS01afcL7ZKcnchgfBLBpF9OTz8VEbORLr\nFPPf7LL2H031yaruo8JgkrUi7Asd6QDucaxeueoaA+88fZfUi6ZuQc6yHmaG\n7ZivJbHBhklYrfMuLqbQq8047hva76krBJP7dL9GUyfLGqWwS8+/LeAIVBTO\nOOE4bk74AYC3X3l+v4yTjv0CWcVos5wWimQDGB9PXyA8vI24bJJyvlGhGwVn\nsDFjlj2rxpaRfdfMQ6S8WFb9Xba8tYZsebRUyuMQS6Xh4TUtQiGNlQ7FztJA\nGfHxyJuRPA7aN83ljTPX5zVJyJ2eMxnfCj2I13BD+B/DB8IUkH68bs9r80CW\nWXiDMyBrdVT7a8XAgoTslFwgVo1ytWre0uhvoPkdsAYaAnZ96Dqk/Y8T9SnA\ndnRLdg87Sl+Pd0DK+IYWTMUcBR7Z4v1tPm47BN5XX+xSmxM+hh4+fMEJJriU\nPmWyMDseSlYfzLgGlGiur7JN943qmDkDu2LGBljnjlq2wHJlL7uCenVhGZRF\nxZIT2Z7NUNz6XPLeIe2XP+HDGSpZtFFOshM1FXPPLByiOkjHrW4YvJFoWfK8\n14O5\r\n=Cvq8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt7eTu29Y25tZHDvF3VJhJmOmlvXz4o3CCV/rXW/sM6QIhAP5jjb8daNllHGZZj2qW5FVJo5V87GS2IZWdiZ/INv9P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.14e01610.0_1611777070118_0.06980493057876269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.5de00c1b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/snackbar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WvcDUiUotGZDRxq9uGj9Qr7cFVqKaTUrelyILr+STCz7wcIm5wXKzLqigmeoBC7I5Lya0Ko2ff+hQW2qj6TFeA==","shasum":"4c163fc1409ee4fed237bf3cf029706614861fd1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.5de00c1b.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEco1CRA9TVsSAnZWagAA7S0P/2NkttlD0VdfSP+McZJo\nh4U7uLN5U2SlDAPTvht9ql6g2LYulHRF8wVABPHCxYzFfzsK6v2+pPfclN1z\ncWwF034WtotqXHOel+9ET5YQUFTEok1gMOwOWA2WzbLhWxdGIOvi74A1m4W6\nycfH5/vW5lCC59d79E444WBkDmMbe79Mqjjyb2PBDDDiResA7fpfqK0vbmlA\nhEmPutSEL2hEj0QSmyEC1ou1/lJGacnmuqbu3qkNmgUpR2PcvZhGQ5CllVP2\nGEkMFSD3H5/zzzgmpbPCU1acsoR8+1boW3o+szRWCQnlDe+rjWPLN1ojhkJ7\nBzhcB7agOr6yayZUIaVpk9p1ZtYgToSY1QwaYvixjAjtkyx0KV495Bt/xq3z\nWG8BXXQgR8+mM1skq3uLXLO1PHMSVtrn85haVFLpdlSeYxdVcGYvxTV8K77m\nRrxhjZfns0Cez0EzQIMaN6Bkpxo94ytg3GhuxPOPYBd95u+LJS2D15qOsnKH\nCk58Y3fQUCDG/LcAIKRj9BjOV9rth4HJv5bauVMjJy5fppvkpaumTixLzV2z\n3GptNMr0k6r34rvBj5t7yuMv+su/Ah6fTnmvrx6E420I6rGJCkrbOD8Rqxss\ngFsKO6QvQksySdapHJHBShXYgqmKUH/fGIB0qq8GUbX7923HTYbhVyni1g/w\nRxsa\r\n=2PBJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa+QjFBwFutXXPFRIBWmsyWcgjo61gE2G/rqBJn42X9gIhAMcXhioN6s0ocM3uLT7N7oDRhK1Qo7qSQ862T+9j2+8c"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.5de00c1b.0_1611778612969_0.8837895328293361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.5a328336.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/snackbar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-vxFBKddJAb0XfSesv5KiUpL1fwKJPNBgv5Du66nnKiWJBy9DOI+BwIMHdDGoSCUdSQAqMQLskJVwuShQqGKRnQ==","shasum":"07fda29bba15b3a517c321ae80398dc9b824876d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.5a328336.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZwCRA9TVsSAnZWagAA7JUP/3tgtVNtCT54gUkmp9BP\nISnHMLQFoHVUfPDccR28Av8fKTtxr4SUI35S/snlbu2kF6oZcWqFOfM2A5VK\nsV7yLExKgnyY+kQHudFQ9NKl59ZAwvP1HIf4Hrl3EvEIsBR7JOb0naThrZtl\n2bM/rLu7ldrWJS4UyGWuyQPV+yTVROcxp6uGwDtHqsnOXNqVCuhnPLxKAiah\n84nNArW2da1sECMwWIB1zK/mQKiXe6qLG4HcVqMat3gzvYNXrfrrpwfy3q+t\n/2/Rd8cHv76e4EIgvwo1huw1jgHiNXyq9+wqI3c0RZnO7bryFwz7zdM1lXcA\n+wKsvqeG+BIrYXvnYme1xNId36ya9NWMwI08RWS2KH5wRNTQWz72TT92ga3g\nE1SLB3i58NmYZFNSrmYNCXA5iHia7UgQKqLQTCOzdvtBWYYV0w8JLqmNmLyq\nrPK3bNgDKGBYGWSgXAfBtT8GMiZmxYxXwIaLAFwVby6n2G/NrdfLJGWOsHoO\ntamOd3h3fskkgzBIEm+V5gZO8ZAH+IMHbrZoSOujbOGHZjAahSaUEUteXPyR\nagjo/ArXY73QhJB8xBDeXyiFM73BL4ZqS/m6NP7fUBI4lQLSpNU8bBi7UZ8u\n3lst3KSxARfQ/dnJjZuAHkHD7KVBUV/CbTef+1uPcXpuR0UFCflo3OPRnQ4z\nSHV8\r\n=s1Tv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq2UKIBGeC82sc4oh+B27qvL8UkiQmLmj3IUh0nX2R+gIgeEfTCakxKljRuVJQHdwpo5XGfen2pgqfusoyhfmmyAM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.5a328336.0_1611863663768_0.5149768949622053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.533b1251.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/snackbar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xGgwHCb1QgGyPAilh4edQ8vFyTi2DL82LE1z5AGR/kFPKmdyEtv9+CT2yLZImix5M4aN1PN4pStZd87kQdr+YA==","shasum":"2a8d6fef4276c95a19654e084b8c5c3d45fb6ebe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.533b1251.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWZCRA9TVsSAnZWagAAgBMP/0pBDCMNkpsBzvP1sRoh\n00v9kVXoc41YywlbAnWoGAA+yp937NPabaKmaqpw1knmP4fkUVfoyAj6dawc\nOcAocoueYMUveCzdrAVbTXJO/ScfS7qvox+2uguinxIzwC/fTCMKQGqLxRNC\n1BNfjlVI1SnBmt6sHlmXjbIuXHN+3ncW8slKCarjKrn27Wr+7dHk3kLOK/O3\n7Uqn9kjGLR3hOGP0QoHotX5g8Etx9KSP19zPv3VV1XnzZAGNiTx1LY/+I+aN\n5ZegpO21p5SXNCu6yvjHw8B5IWW8yEZu4knAXinxf26Z5f3pqqawd+7icWu4\nle+vGFt0Ayn4v2ShcBqZNcYt89VCD/2sdczrO8qJbqGYfBdtJsFXSI+oj4+w\nFzrvEHo/7ky0gnTklt959/7kHcx9TYpyJCoty1KTvbcqrw11aWoSII8phZfT\nNeXwdPofhs6fH4JUoPdLBCboApo0pFag1XCqs3ivRPs2Y2hVRCabj96r1QJY\noPjf6vxJ0Z4KGtp1kJKBf81Eg+gWtHMYm5qLMmYIycsfQ4eBd+VbF06vi9KD\nSWe4GBGkcO4ajJAfpH1YlaoSnzw5L+bKRDaivUaDvit4HKAPumR5ter8ngNC\nC4lRAC0uB4kG1xfefW5xPHtdl0AlYNkU1RT9P/sqe52DMYir4pJG9Vxe3ZpS\n1UVd\r\n=MyeC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6yTNnQhcSscbm14YiMZGV1CMDFU8/rUToZ+jXVrQvzAiEA0MNhIO0E+jgBW0AQot0ZpDO7oLHVHvuXeebP7FIhmsI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.533b1251.0_1611933080962_0.5864919082916746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/snackbar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-BUMcsyMTcW+yCifrOF3XN7G2YrZ/oqmR6cvLbAZFTcDncoPxouH2QH76Gv+cBEnGa+fGDP/30lo2l6fA7LNQLQ==","shasum":"c87e182176fa6ad449671843e958557c3bcf1571","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.ab5c0a10.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNHCRA9TVsSAnZWagAAI88P/1ZKlvTclmEY96J5ug7u\nnFYe//Gs1jnFezV3ZU+UeVX5RO/j0KNprUt/OJssM4PFnARaEFrS8b+3fO8Y\n7yC9geHrdRe0pmf6ac8IlibTKj7v3h6Kqc3/oWCU9zkU6GS0jiIsnaapbqYv\nptlUhAowRKCg7DiPU0RGKolUnpCCkpcJc1LSki7Vs50rddF/o2Df4nDBsQc5\nokhwW+oJ6/L0s5PBnxZQPEWnUf92mmUNwPFTgPAASbsOkuv3eh407EY78UEy\ngYt6oBo81UTl/pBnEdW+/KBX+h19EA8tzqAogdEbCS9RkTeOFk2FtyGEP3TJ\no9gBjvz2Hg+eyEnbo/2tX9NDu4HhPwjGklbKhOrZTehMp+sf3n/TmRhPhD8u\nkygqbtwDxhpECDkTPIBO//x/9hGzxE1HqZnT6UYBRobdNZ2g9y2e5cFmnIau\nshe+V58MLDFLMDejBOCx+UQRYL1g7Sg1J/7C5qSQYlWMMd3xhVbdv4DQLrQA\nTiyMjQp/frVDhv1nmENIzaWmkfVS84357a2KXZdOWGrVRprQ4AAXegDcNv4/\nvWeQ9G5JkB2WZ5BmVgSXptwRGVgME1UHksLL+FD8G1LCv2SqTM7lZcLKveTu\nj/XSmlAXYmvPxJRwNqLJOCTWrwq9dd1w93VTq8PQ5cV6k3KE9+HetCFpbB/Q\nBNqP\r\n=6baz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMquH3vAlJUVdF61uKnuBG2BHkoBqOSAyQRwxc6H99CAiEAp+UU1urHCkFl+8G9Qr9wRZJ5CEwIUINr9igf/3+EGpg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.ab5c0a10.0_1612297031440_0.21987559901793885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b7a40b27.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/snackbar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-lCPqvxEL99Fx/xXSXJjuMrjlfSpHz0TkICg9fRE0coUdUL9Ww2x+kxQ9nYBllv5lDijEi7rZYLEEALYwDCpj1Q==","shasum":"00cb99e277ca87c7fb0f1ae5a9f89e1f3b17f3bf","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b7a40b27.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrs8CRA9TVsSAnZWagAAHgoP/iLQPo8SZT1++zAJ/YHC\ns1m2CmyMTOpT7Q1qJcAfWdAR0bj3QgNgq5fsrLQPFF1j3G4GlZ55v0rLVZPq\nJk2yp3X9v0P1GzUT00ZmWKLllHbNcVYm00EDo+2hVZMfPg32sG57dpjDOcmC\nZ3FhVOUkvh56nLMza+kidE7abFkTPiIGckmTx1K9uVQEyYnvDsH0XMg0g44/\ntUw9UIQECXvbrrn434bHCzL4lp0J40S0Vp6i0DV0KLGeFptxYsI68sSujAJO\ncO+EzfH+v6qNuwnV0O9mimms+z3IDdQazY8NvoSd4Avmlh/hkbeM0gFk/m6c\nWQYXsXBysEqSIPwwK7Z1nK+u8xdkEAaM+zWmRi5w6pcpAeoEQZTeLc7SAP6Q\nuIxYlwDO7s5uSRn461RRinhqBo2rP7zG3kAdnH1JFwinYxxanX1KC+baXoJ8\nATeKO3tGHmsKM9bIPVF9L9AvWk0YsgceiyY9HXGMu4w2CVQT65ugPZf0+zox\nCCd9lWTT2hrNgkqUNnJUSOCtqO2q+QapSAeW++Si1rVE5UEpX9zxPoSfBgm5\n2QltFrZnfJgus49CHwwtjzRY8sHz+VL00XxhJHVmQ1/LyDuyzPnWf+/rulN3\n0nOEvzjWOcKem/HhoKcLqA+jli5LflgJf8VXfe3vr9BzemQWKgVsTH9GQchN\n96m0\r\n=+05N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEF49O4KAILfSSEWeQoPuXKGtTsTyL/QauwIqhj72RQAAiEAphYxifksDSoIupCSq640VDGTeC8PlJhJDJyU15H1UN4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b7a40b27.0_1612364604133_0.06712530801827099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0fdee204.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/snackbar":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=10.0.0-canary.8e66dbfee.0","@material/rtl":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/ylZP4NRLF5Pfxw1eH1SCFIFFK0BPMURyW0c+9DgPENBqsLW2U05Q+2UskPNRuAkCksF+myMW9kU7VoyPu2L5g==","shasum":"b7fcccd63f82f46e9f68a4d78e738aa023347aa2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0fdee204.0.tgz","fileCount":16,"unpackedSize":67154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyNCRA9TVsSAnZWagAAhg0P/AhX8/niPYr4gWuWaml3\nh9POsQsv9Sa7KiKLrF59yyBLeDfneA4msRjo6zxfjaFPWiPVGb8BE1CCZEVv\ncz5RQ17s3yPws6pUF0bWhNUODnc1sGMlHntFUsbpBprMwb3rVZd/gPUbcT5c\nrmUH5NN3snD36EENqPKArkrIErx8gaYZ7ZaHVUOILuX1l85vXnJLsuM7FjDT\nJupXhvJqyTJ1M5OxlOLcTpTSVDLRhFU4tDB7rp44zngvZKWFeotxlVhJouZX\nMv7vlluCJiPNfXml+p1NXBPoWb4+cH1VQgSITg7KU/aeEslKUiRTmx8K5YEL\nnxyRLBeEUxmqWlMLfrCCURn5fEAeLWW4mmWafstLE8kSDt1nqz3G14bsnOo5\nDcZJapptb3MlKF3GcLjgJayirZabiqRRvG0FpCJ1v0fccU7LyeVbE/u1bquZ\npMU7zxXzDys8hKayyjz1bO354dck6zn8l0UuGTPy+75QrCH+D8EQ7NoupLfb\nN9IbqtOqRqpxxSpjrOMK97cPSv6pBa8pbd/oqy+XpAV875MnnWWHgdWPQz0E\n140yp//U9aB+ndAb+SXRA2fU/gRfplBAodMlC82A7izYvh0jzuC/E2LCVhp0\n8bBdhVv8/RdObrCQwvpZvDMIVnGKIpntRpSGF+Xifty6mfGGuDZ/Nh3DjHUs\nASWe\r\n=YTq7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCooxasaIPcF9gRVvAoG2R1H09PkkR63QPCz1vMcJAGBgIhAOQutASaLAFmCcSo+RMYrIPSbsMp7bY2mGdB2Id8ZIY9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0fdee204.0_1612377229308_0.38151960299196497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.5160e548.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/snackbar":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.b5227247d.0","@material/rtl":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-mlqNssg4iuxLwlhNl49k8BpCQwEIqXxUZM0zV+QshQawY50LBWsXQJvHTHe9ZTfHXcdL4YKjs/O2SFIch+PI6w==","shasum":"02ebee368fb4df76def95b39d98c7e508e149c05","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.5160e548.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdnkCRA9TVsSAnZWagAA3KMP+QHUZ5EObLIRzzUlLgQd\ndoRnDjp/t99qSxU9+BTpe3PYK8sWs1yZ8eoRbKgLdNz5JGi9wEpGswY+6ySE\ndSuXoItTpa7e7BmVHvRnq6ykwyLU3jR3mZfxumnNShoTLCuc+ghT25zaifwz\nmSier169NFIpXS+N3idDt0YdzIS1jrKItQu/iyg8pr4D2zoJ8ek3vMmSr2Dl\nMG2nGcet9cSmy9IeTkUo2OCmyh4LYTeSgmrSk739hvqgxjjxIh3/3S9Osmb4\n0g6uco9TgDsBMjpBPrwAstGiOmVvLkzS9Uj+ZsIcfgwmNuDO8jxJpts0AtWh\nj9U38+gglpCdjV7zwwuSAetVLo/ZOWkc/ED8Rn7BFf00NqY6neGGl6ga+EgR\nZWs7id0KQyxHBq9eCkBZ9TcVPIGEspRH1kDNgXQc5ddH/lLRvrNQzQNpO3UD\nHt+p649Dt76w4Tk0I3D8NPE2wvRebZrdwBX9uPmvA2pCqWHHiW6d0xvMrHUg\nun9FCUpSxhAVpsEhqqfNmboJk1RIpaUXMX4OGJ5O8ZpXqfup6xoLfuqWslMC\nnhKNHXUFfUDMAT7xSTVHIebAx95vmWl0AJKclU9kbG4k3io4hpw/Qg45g8Ou\nJD0Z2/iesQ9Su/Ar26cV09NP4kA57kLwKyS5hzfdK6YdOh4UjNopR4AEhRG8\nkXvJ\r\n=qmur\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJem2yV8JJTzmAmUB6SbrjupQjZa35Z4Xpr3m3bj/jRQIgWJnMIe6td4megTCDwnCm1QVUwzNoJwGzLWCmoRd7KWw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.5160e548.0_1612569059981_0.532665525946536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.4fa2daec.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/snackbar":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.aac8f5d9a.0","@material/rtl":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-r1/cVGwRRJZBR5gkIgjzUg88dMbgsaoB7ZIb2LkC97W48xU68fR0HXzZKwKaJM+W3r6EXRaOenWW3WhPXsii6w==","shasum":"b260ec8b9a61191870992e09f9c7092ca48b9bc6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.4fa2daec.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTMCRA9TVsSAnZWagAA+scQAItvN+H3HhFEYyKAcxCM\nS848ZJOnkLen5DCqtC9hT2RfvmQmI2krd39ip5GMBgrhgwSvu+9UCPxz4yEF\n0t9eUaCazCT4NNxyVU8w9JfsU3DeDuIeQ/RoWBLFSh8odJvIlLlsI2zxqqw5\n7SNc9ZroemwH5C4T4Kg9wLw4nfh6442SvZdpmOyVhu+9BP3xhkd7G5Lajdvq\nHcLkFayznt6qfgyAOQkrxI/kHr/hLLSNTOCxc8l9UkTmeIQ9U2VtzM4xvDeY\nOvJnGl9tUeCGBOYoA5B1uSF5c+Dws7uYxqscwkWbPtXakTiWd0hMPiEjUHu6\n8XIBlAiFSFtcySEd0JXOaWzoWcW8Z61cSAvMvgmXxJzsa5GWM1uU1eaxXylH\nvj4C6LLfQUoUgN7nIesIO5bw+77NCV6bvUUA+os/WiPWfxte4jro370TIIDF\n2hnkqp3R/b5hdluh5IaJVT9j0S+9u4gGvad5CIFT8+bnC7dz/2JaT7MoeaXR\n/ipUUxW5wIPTTDyEAkAkqsx6WduzQJF+RC/0WCzWy2tZWa19izJiOehQnOqB\nmDCvfvvXtZMByW9EIX2QHrV/sYyA7Sfma5PPbNy6rOF8Q92JuzvXeMVYkB9Y\nIXDOGGao6+pqUajPfjaBoQ7jndLA4M3UrBNEqLkyJ0ZOHuBUUcTeDm9n87om\nCTK3\r\n=c36k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+feUJzdSJw4CLEd9fi3lL/OChrMePf1WVFtWTDcDJTQIgSeVEc4dvskNQbTxDhZGvDcfYiioyErCGuiuebj1CgOM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.4fa2daec.0_1612829899689_0.4854536909100289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.67f285fb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/snackbar":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.750e18fc7.0","@material/rtl":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-jQLtuDnIbBUmHm7TPmlhsK8uvnigRcDw47plIO5bRCSMdJI9MuuOTWKJT7cZsRdRbZdF9emG/4BnRG5mHYVYdw==","shasum":"0aeecae75fd34766ae526bb4a163f3793e7d991e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.67f285fb.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdxkCRA9TVsSAnZWagAA9vIQAIKca/6My5r7YdTk4g/k\nN0u44Oa7UhhxJXk/M3DIok0zZNzj5FGV0QYkRpzmzq13nzFE2kfQKHI0u3Np\nPzVThX7vwVzC72qkti4wijtti6p7yzKyJ2/rwYmnwBB0jrOKMCblJ9ikzGfo\n6N5lrbS1tFXA+/EuvFFu2jLjahDSulSkjuUW0S6kToUAhUBiZR7NVaQHWuss\nOc593A+El9GPnFtfbL95LxtS96LiC6qhF3SAqCQLW8Cw57JiYgvOyAPra3GB\nV+5z7pnuX0ApzuTSvE1iCZLkNFHzBEjjuq3VQ3I4WqMyjh7fIIzqtqucKzbZ\ndjyHIHzM1kXf8yEaorpbgWD/zj+D5FKNcifZJExOMFsF9MKvzfDUhQXw4oLH\n1+OtxI4/8XDpVhVjOneMAt46dZMiGS3sfTjoGANLprADdqsleZlq/0w2m8TZ\nhwnnycQPDBAO5yYfZ9hd0lPiJMiouzr3z4NIVUdXu7F3BdlP+r0UWIHro2a6\nEp0EwldLCPn9obIaICSGInDPOPqxQWq2LvMsjHhS8JmaoZw0J+8ppUyT4igS\nFd67NMN5Uyfkr1vNC+qS3A4pgway+CA2iKTZjoE+sLXPmZ/fbOazMQG9GFQS\nLF/fSokDj4Lh4LotsIGbQcfZpBTUd9lcqgIfzEvJQEZiPCS6P+NxNBDTD2qZ\nlqPK\r\n=dtI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+EzALJ+zEaXwRq74BStSBuyaWYEDuELuD0nCchc3uQAiEAlbXxl6w9XmOQ7bwFyJ2do6TbMGKAuC0Uqk92CBdKkbs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.67f285fb.0_1612831844262_0.17571309939658386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.58cd5a70.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/snackbar":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.b62b1266d.0","@material/rtl":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-uGHUkg68WQUXnupZdtGdxqIbKzXIBe4rQ9iGmPm4k+OUNdpLr9BtaCu0WaNE09JYC2gKnELh179Rt6GqUlSTOg==","shasum":"6b98b94686959a7ac4c09c6fb4fb65a1bf955180","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.58cd5a70.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZcsCRA9TVsSAnZWagAAolgP/3rizWO0zijb6rGfiEV0\nzO1hVF2kyieY3Nz3+jKGJCUblmAArwQ/cFPMuw/+MwOX4IMn6k8g7AP0FJMv\nqZrzwnxChrTxgq0YXdZayckjxmk3rKVX6KaeonfDWQTQjLTOYJmMK5v9oI8j\nTEnFmpHZXSumJZx80WYPreeRlzMf09iatcCnOHKkP70PK5ELFwLxAj0RdrL2\n3B+UpDHLKTBTps0mK7mw0NoZ9hDym2uGFeZpLAUs1C5pmzhdy4prWvMqlBfo\nYrHZHkA4H5UDTa9MxfDFriJY2A4XhALBX/11NsUDmYgvw54hBzW9YGGmWibO\nb9HcU91/DynN+YFgBU1COsWYOUfDIhwktKsQfgoAsn+0T2H8ErJnrOURSLkl\nfddvibUgHaf/YFGq+AVFqkBvVzi0wLXvJqbP8C8xx/32ZLI3lWOIKIR01ReR\nc3du0DSBDfKILSrhu4+ikuGJI6ityJU6ImMWAmhDgJ6Wx3VijAv0lb7IucvS\njli96iHf7nB5mQqj99lZL/7Ck50x0IpzzGCdv2ySGbaDWTQ7eBm3Izz5Hgk6\nlUIahSUmZg+n0TLSZmV+XwfKM4lgCEt3aN1g5y7O54B6nPTE4hvshNceAfAK\n/dqvC/ToJJ/IBzzmP+InPimpkR2USF1FuwwMuA8XPu6h0SmwpR2V3v4efV31\nvNij\r\n=NvE4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqE8o8YtnAGtBgOUkocPDzveaIZr6gG/IGfZL5bkRPpAiBTKS3ifREl9XUme0kBQuPLPu2I6Va86CmJFHAGelZgbw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.58cd5a70.0_1613076268116_0.01942401882559519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.8107ca43.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/snackbar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-iMrYMTcKUXa2n6x7AhZAT6lVqm+l0i+pdNavlWwUo+SlkWQ3/lqFVC6l7vMox/aMYVT6ZNUbwfvUlVtqxbAHKw==","shasum":"8e1fff61e1da674c7d9f2fdb2f0eceb0117e6d75","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.8107ca43.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2nCRA9TVsSAnZWagAAP08P/1bVmre562GZ1T3MXGzf\n8jcwXeC7SWlwryBJ7diREY72NNQyvc1iGhujL5cqzaM2mOm9sN6D0qJBEV2d\nbCNiRmt9e/DSCQzz/GsqUfgHctn8nktZUB32C5qShCgsh3ZnEFTGNWfQNVA4\nxuvwSky0tJmJD8aNEjs5JXh84HElMLosiXdUrdM4q4Dso8oofSTNv2IL6IlV\nej1MjU0283m3hTbjbSSiZOGd3yodTvsV5MF3Hmnxr64dR7xE7L6RcQy4i0+/\nGsPdp27ImfxcqnWlzXDKxiFIfT5Bosv9knaW0YGyr7o9nijlmedA3dh8RGBZ\nTMwdRQOy93PLhfDSQ/ym/zIFwb5QmrSruZSflJjdul6OZfJVaSVrJ4cWDCNg\n+YlmpVxQs5baRHDooJ1NPF7xO+m1q6ffnXh7TVHpbvS8kSYERNewg7xZwDz+\nbtnpT03ERQVoafBUyqgDpVXQnQsz9HPt2S4ifj+u4IH5vDJez71QDNM20wxK\nXyssdOdNaBjJ8DuJBAcM7vHDf6CkPJYNrw0C9gRZbldTigLQrqItHtWL6xzw\nzj0WdAkkOm6CEh0s1KhpI3tOHlTpZc8vHB/IPGJlPyLExbPpYXdG/EEC+DF4\n3U701ntwMblvq/7L/5h9zMVbtlML4YGYN7vMCWfjHgXNgOUnNEs8RAwghEbU\ncQaM\r\n=nEh8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANCqPlTevU/FrE6POoRy/abo4iuigZkq9WfVTTkoOMsAiA7yF4HVaGP7ZOLd5jx+vajNItuErN6n4+tixulz3D+Ww=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.8107ca43.0_1613086119108_0.72308142576057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.d35d64ef.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/snackbar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-UlBIow/rEvTGu/4XnJoXsGvE4vgBN0dtUKFPijF6/YiPsL4w5TWjMYOFHNVW0zXU6DPcuncawmfY1vlWrZVcjg==","shasum":"6c2818e0848a4e0e58f49c0f9d0b2f556950d580","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.d35d64ef.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcD3CRA9TVsSAnZWagAASMIP/iNBoOM1o172v/sEGVhf\nsumI84BGE0+k0vfz/qSMaWpBOwhHR18rGdfGmGNwBhQmVSKTlkjiDsgEBulV\ndPlj+1tCc6eOGl6/KUpnOGKyd00AJ3UA+AoxssI3hk78DRMw3nrdYQEZvnlN\nDBun1k+xwu+QrrHiPZ7Q1bzgyRZplVEYdqsqOvWAF3vKag2hO5mK9scEqwUm\nDT6A6VUI9h8j8g5zg5455BREyhDX1B1WLOS0L5Ks/5K6PdcqUZvzIDdMEFQQ\nRmcknpq12Kii98xxzVgMjgSySAI/ge76tDn4FcJcd0LJDOUJ/TqdqbFHp03X\nksQ76Uirkc4274AaefJ3acZ6GNythhUzpxLxFY+aGdM4/uOekD+ieljb/M7y\n39StfovGJNwIGyQRhnzSeEu7NBOm0nl9uy4bmUu5cBAR6SKup+1zsaoDFkdZ\nV8HIW0MoG2/JHCdc9fdHntOSo+UdFce5vuhtsXVNRJWip0ecHI7zMVoCnivL\nwLU5HD1cSyTfq8MP+xczW/IbGU2xmC0OFbncttz1Sw9/tVObhs1EK8w77gim\nAHV8tLWXK8AUSWukIz2oYeBY59gtsV4WNIo61UQx0cBv/TFkwbWlARxRPqo3\nWIZjRSJaq32H1TLNV1ks7sJY6XXqqipP0yg/uK/H6oSzP0xXVh00m1JjbRp6\nIk8/\r\n=/Lap\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJ36Od4Ekb2nuKoD+PKdq8uDv2JevG4tMYqL/X2+MmrAiA2R+v/VqKv+iNCJCf1dhL7+/fbpQLnCB8/Mdpqvx7yPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.d35d64ef.0_1613086966788_0.448903007083975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.78bcf058.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/snackbar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-M4xqYEQmDsoagiLZ0zn3dSOWr0KaVQP9yIPN8Jef7olFrRT0+n27q95A05IedD4j4CiommpJW7j9F//lR7maLQ==","shasum":"c939d5ce8ed09b5cfa9cb1c1c92713a9da9a918c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.78bcf058.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBFCRA9TVsSAnZWagAAurMQAJ+QwYg6XFWdc8STiOBz\nn70gjSrKqxumnBMQf8EpG38NHmKE4fMPlTVfAcsgFEThV0t8fZwKUJLGpH/k\nVz2VeCxL4bHqhvvshlz+SkWQWyhAoy+/dX0fXo7YbB/1YE4JNtkpL5tQVdyD\nKeXuejcgTT0NNQ0lE552rropr3tw877qWb8qRB56INo42bZCw3qx0NLjli+P\nQpx1XcEJbvLTuEWYcVTXDJpjFRhod9wH1BMywQOs7J7gSJdIYFpoF8gcAT4F\nS5hOmz54ecRuY48gKfKFbrJM9FAPjgRHqyC2vzo3Jgzy6x7jEBfcAbHxdVUM\nbZUkV7HgfGsyseMkCy6BIzoI4JgNA+YUL5lIWxHh5EuHo/QHykOSDtZK4CfP\n6vdbjuDvcG575eCvQYdC6CAX7Slq5Ha0PXpRbP2KzmC9BqIx8eJi1Qw2/Uk2\ny1k5IPL9AhLeUD2vcbtpdwsJ5sxmqap/tWH+Td4S1g3xpV7M4pwc+IqR+eaP\naVaepMPFd0DAyovFEmGIW7IeX6NP3xE7EfTl9k4trmbC1r3A1Ft7pxVDnttd\n1psJddQRqRj/hQ+bjTn628HuyV8vVYwZb4ifybmVp9mCWasvXlNLcaKhpL10\nvAQWR2U2KOnJZL6VI43P4gSZxxoslK4LuW0MQ97PFHO8Tzw8PXrFfP2KpQH5\neuXZ\r\n=i/xv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAr3S+5lxWTuNaj0nP1cqxBNwp4LfTmTgNbQaTOMZnfLAiBMYimMqSkqKtjSdnWBYdlsEZsUr1GsR+KZ3SWLbEPVyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.78bcf058.0_1613090884785_0.4857175777181788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0c6908fd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/snackbar":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.ed88df700.0","@material/rtl":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-SnfFnMi1fbz7Ir570jk4zSV5eR9fykYe1omaLfrtM+vBxNBk1ndh9357OIgnwpF+EiMLC4Y8wQuq9f98TnbbzQ==","shasum":"3125ba365d711283e4c31db11c67107500ca9cc4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0c6908fd.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjTCRA9TVsSAnZWagAAOvEP/2wYelGvcqBT0Ex3ewX/\nB4gjwKJvFKOSYUD0sUiAdwvs5mSn50AAem1vCnfC599u1uK8/vnY+Njs5Vma\nvGwSaFgsyMp4H0YZr6JtGIFJzMEUl5YmLpmWcJeX7q9m3N8Gblp6x4H7ZZpY\nROF3p5jqRWDOr8Cv5tR41nIC1mQlrd2HdQ2imYeGVjlzZ2e4TMdz16XsSV1r\nMtE6dZhBO4MKUDPVzKFFWVeKXtUnPQT0JfwOnUapTo/lLZw2Y3Rx43zY/93F\nzKas7KYGUgDD4CyLXMWZksPG987kle3S5uTE75+QsrL2Zc7w6CVMnrkZw5tq\nacedjbJjYwr8n4xESbWcVOVVlQC+2v3RkK44YBQ0Esr3SIDZa4pEJOgm/UI9\nDVYKVB5lfjccc7R4WdTJTbztJWCK4zCrA+h0RIKBWYL5T5cdgr9eAVXBvK3m\nBI9PsMgJ2TQDEL4S3J6Mocgo5d7WLuNST/opuahLhUDDDlJvVnYb88dHuUxY\ncIGd0att6Bg0fp3tRzQmo4RNzqn+0X1xvHegTb04i7Bj5BtQhZRDpvtCPQ6O\nOew7NNS/soN32tEr7Ir97NzSlJ/8xj29eMnkwRdVQjFJ4XIObJJifXmBgdlO\nmJNN3RDsKUEA4H0+rn9LxFEJriwa2Yz6oEZKuZ8dyAHFfs6mCYbiXpuHNZoe\ndPNd\r\n=Y0cl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBkIC9+NI+XquejNMo27PYqjCTFfXVAvh4uNqmTy+KmAiEA/QjbiXUAh69qn/m1/kSZU6NlVGawQPxvHxA9Akti+BA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0c6908fd.0_1613093075387_0.4103921602440468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/snackbar":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.71fe9a067.0","@material/rtl":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-PeZrrZVveEu7jHlKGKnr4s1PWyjehkZxlTYLMLMGhrrDKsR/on4p/XUb7THK7DIVN5dRZWPCxLNRxa1vmcH3Wg==","shasum":"170a7ea7bbc0dcb9ef963eb3638dfe9ebc1016b3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.f1f34ee0.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJpCRA9TVsSAnZWagAASugP/AwS7+akj+kZ3yBjLCIB\nqx+CWkR2/zHRIUFoquEWea5F6L/pM9fU7A6srixoOUFQLZy1roiW4QCHyzW5\ndgUy0MCx4+S2CQOKtTilpgFCyFDgv192KC77XjXmg90Ta6mNhX63FZrGfjG3\ndK32CkIvUe9OvxXPxwMz3XnfeDKJQ1Qo0k0S48sJP9E7rCnLkgP9tE34aix1\nf5osx67UyLPQ7PayANDLGxElBorUICs5Cz4BiIAVqkqlL7jpl5VEGHcFxd+R\nOLC4no71H7nDjQS9JqKjHl6PmzYqdfMBowSDvGh1RGp+Y4bZZkpHg8qJzgWA\nRoHlNxBj4URJczcMoOxWWUjTKkc9F7UBT2dp4Dhzucj3lI6jWs4xemmAAWYA\n9oNCpvW48jf86FaxRseG6zpmhjuG3y8ktW8BZwc5YevR67Z8fF1hJq25MnFJ\n3vDfiealIuSnRv0Se6PgktpzWaCMETJdPZ0zoLAZd3CJwzERJIatHfqUhq6f\nSTt9pThlzL6gfHPw7CiUSm+XVN8KgJWmByj+lMyuN23Ltlik64fp7/+uanrV\njH8Mkxqr23DohefCeMU94ZNnddmLpfNE2MZShzcJDfLX7DqalqgtKA312XTw\n9j1HRxO7Hs0enhtPWoGM73GnaVPscv41bH2bsxdlGdeq2DRvnkyAPt9ePfVU\nBDaE\r\n=YeHn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWfwDaMnX522FIzuj/oIjQRr+3nPzPskHlh3Uw88O3eQIgDprGhkim8EHpCFJlc59czEI7zq1RN3MTR3wozF/RphY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.f1f34ee0.0_1613161065471_0.1382359437144467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.d84df029.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/snackbar":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0fd56a86b.0","@material/rtl":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-rDtpAy3ZcdcS2WmiyTBAqavNUZVxKePEacXNaSlDIIEr5Evtb3WaitXOg/SLAWKMIHcnJbl7HSEfktwUQLg9oQ==","shasum":"ddd5512a46f0c39b4fe8621b2f21e9728626cc63","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.d84df029.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBf3CRA9TVsSAnZWagAA5P8P/i41TiiamQb7TqwClFvo\nwPU/qnUTNPEIMXuBSaCm7/CQ67yyRsAo6RHzZZ9pj8SoUdNXv7OOQeL2FPFP\nfnW4vCBih/bXEwYHoXjgVJs7BXmZMzdXCQidH+5ICw+WihoTpT6gY5Q+K80I\nnDJBQrNXlP0viwM0GFeHjeY//rE6vUv1f6UfV9Va0j85sO29BGZ+MZZYw/Mf\nOH7tRVdS90NAUNLqYqlkTNUGvqTV+20yyFGwqdKA3WodliUtn9vca520wcUr\nU3IErzqzRL4FS5vDFHu+pKrZ8bnJVK1xVrfFu8OQyv082V+EsOmWUT5x+VS+\n4BRUTTMGQu/AMMNPC9tkFiEoK0ksOnlVAE+2nij6srZMpiuFC7F7e8mWEprZ\nSO8ZiHqSfZ4szYGXSJkHCJOk8eBUHhghj6vdGQoY2vDQwDzA4A4nGosCdOal\niMmdyO/hr0AFZFxPCWrbm9bR/wYK9bxtir3mtb7PDCaomzf+CpbdB8vTLXVG\nkRuUBIH2+vBmwWVtPsftjIx578XcQz5Uey0VblZS5JoItzE9Ly8XCbhp4Dtg\niqLKc4YuOhZ5smPUW6UKlB01NbAYWgYOMNywyXOGNMFdx/7qC8CGZv4aZo7N\nK7xIQzbdPEYO+3eC3TJzpipCOI9UpEhV8yyWWaDe304INwsY9uqpHGffJwll\n8Vm8\r\n=w4GV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChH+/xs4pa0bfBpHGWQ+rk0iFHcBdBkSF1P+1yZtWNyAIhALBlmcCxXYpe3xpU+CiVQzOsOtg2yVqJfGJPTvPNfNOu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.d84df029.0_1613502454784_0.7816890428558392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.c525f471.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/snackbar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-N+VTDZ7I18Pi/g0WOdrQFo+SVsiVPZOLGzQ3kFc3VsXQNYMW3EnFPdraT3AcGqzIRZFXDbYmR3V9/+tz3bMxxQ==","shasum":"04f4885cb53eb5897541b69c94bbc3087264fc71","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.c525f471.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYI3CRA9TVsSAnZWagAARXgP/1S4/4ZYSxe7tO7ItVHu\ngG9aKCe+KTS4QWqQzYn+r7R1+rM69z5N/VcskRNMj6OlMs1xkoiRPJ5JhdC1\nydQbHVDZMb898QUrNds2/D56HdFCAIpf67o6XWYeRQ5A+GTMhdR6KcKRCJzZ\njQ/WXREBSjUiQ8wqajBv6uZSablP593dYoUwguAdFpRBtglGL/hlTLYnj0A2\n9XJsQC2d+mchlrdz4cIa4ff8gEfkkIQDch2FuUmm9pWUbmhkYzRH8dlXS22s\nSQvUMWiTC04kzDhJWPncsg5S5kGNEfVjBhIZpIGT1gw/DrpmL0X8gDJqB5fz\nL/VmTsFWtvVxa9hdG7cXNz7fmK0YPTfcN1Ii2JwtKkyQdX4MN+wezauGOYc6\nZXEBRkAoEvozjrLdMcGYJO6aq0GCfz7OM9CubjlMdxEniUYnonaRAS3pzy/6\nfMpAmfr9+ODrujrPc0hT/ZfED3iwaE+ihk58pYLOvj8RRRzEkQ26g9Gy/MWS\nlHHLUmNjlc55rZrP+/Pk3GLGkvHoEJV33d5INR3sgkSnQNcqWv3Qcs534YqC\nW7F5Ke+f4SzgT9gxsYDCTZSxke8Ap5iBubMdkcpBh2vaIH4UeKsDL4PieKdX\n9c5yUuSUBUQk81lHwwmYf1TbPVWJ6LQ+QWD7BAYBn0KZiRg6UMU84FaFBfeH\nTuk5\r\n=jWtv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDlWcEkq6foPVV9AeIW7BEBSY9j7C4qnWhGZEB2jE1BgIgDM5wodkPB9lLsyM2oEig27X9mD2e2KTYnGadSJ5BMZY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.c525f471.0_1613595190893_0.6022646775461473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/snackbar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-/BCqgeIGArPqJ9HqX1fE0k0iBO0xEAZdbq/wvdtiDZyV7vcrUk6+XDSdwEhLcVdBL17EyrQMrb8nq5kdBcN2ag==","shasum":"32075bd71d1c6c8b3a8365faffc09eff30058de2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.ba7a1b35.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwK0CRA9TVsSAnZWagAAz6EQAJaeMcx1A29ZFBYKTncS\ntHUTu18uV5x5+LYKUk8NPv5qd0/seFCAs8rn3Gn9RkWKcJSHqHJ7MifqLVlm\nwbOZomb+f51LaX6FNWb6R3/WjhNIadC8dHwHkAvtdY4ZxxEHKbMgfKsDNReG\nLhVTM6eLc4dL1O67OQQO48YcB4muoymn63T3ozhk9Un9yOCLRLrsIt2V9a7E\nzQca6/k1M8KXZ32QROPYdOE8zm77/vjh9OAKlu1JM5/dmLYvV4zX5dNFUftS\ncOhTVFr/f03+0hULojNMZe3sKrODlleA7U4oiNHKr/RkA2Xjes20hc8hgl4T\nfeibzo8YLZDDPpdyLsHrUo8Ni2dLy0zhhm4jRjdc2Lk2YRC0kwjsfQCw6jGh\nsHXmurPhncTSlo47R+eNkPYzc+67UTCswNp4DH6nYrf2I/ZfyZEZyeZ9LsgU\n1LCHocpgsj5mVTDuWWEnC3MNvIms3QU0Yubge4CJ9i7UnqkwBpZBNzle+mIC\ncuN01SwxlE6dVb79/tTbN9/wf5h/Ukl33DyTkBm/ZMOMNaELe/OAQSS3Yqwz\noBotPZUSrC7D10lGtsv09PHdyOMN7zlJZUU6IvdIATij6wIbi8obK6wVgVEj\nUlmkwLb8FPzny4HDAI3m2Wd50ABkQIUxLDC+fK4BvHIjuY3k6JRjoudggq88\n8DVi\r\n=feDF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJbTLWmIClTUuy+2u+PnU0HbHeWl+aLSw0mLEjPu8QjQIhAM7MP+JTgKXEckxk6lgqE1gOq8wMOYKyxdWlfERC3842"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.ba7a1b35.0_1613693619984_0.7277030486196603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.9a566dda.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-hevFTwCDGqr8isQSF9eXh9CKf1UjEnbI1MwCYrp7YeLMs2Mi7DgaCVeUKQe942AUgaLieMshQnxunq7z12Y79Q==","shasum":"db027fc8fb87af38ab9bef34fbbdb167350f2f4d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.9a566dda.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAVzCRA9TVsSAnZWagAAtrwP/jtkpCEskl7nVY6Db18q\n7UhMtKk+ziPKBqwL6Zhf8cnuPQ7KVVve8+Mm/Ygu6BuhDkaK22EpTFVBBuQq\n5Oy2E6k5f5klnZOsds2V6xvaA5wsVLMXIwkpK7ve0XYoIx9wziM1IzZuIpAs\nhXnJhaAkiUq9khBtwi7AiWW5FhS5yHdwrORGhBCCVXkxuVNwJQXKm/ec/Yl6\nIgSp+tBGbsGlhIZPyd+7ZKOR1l73QkBwuexQhWOaDnAB5IV0rp1TnkXirbW1\nDPJz/mptes8q+Ies1KFRLoH6aO0ZjUhaItZqUNJglPauzikayNQQPvDmulx+\npwrPEa4/vsVWQYjHhKkTeHPVPqxV+dSZ2li33em/JCCo6kCrG0Y98WtXp438\nw3gS8lOMmgiLfqXEJ8B/gB5k6+OaPYMLde3sxKmvoOf2Xf6tk6V8nFToNgae\nAGUmVxme2kzVR+0wjs17W5YCmGMeVXYPwQbNQiyJC9ViJv7khhEpsDE+SVAh\n8aBQfww1Ch/JGklApmQZDrKRe/oef2lYQFBcKyFFLLuWpWq37Q/PZFd+J6xO\nMTQPB2wL+MOvEw+BvYd9QtOh485lTcWQagvX8ibXwK0N59cYFpw1g0gsqYmY\nEkCK3xzftRBMpw0IXR0BjqaAJ6irV5QzoPo9Kk0cYfUeuMdeR6QdE/tC46nj\ngrpe\r\n=hXbg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtEhWrFwf2IsmIQL37b7LHlT3h/Fv4xvGOy2AWnayYoAiACs8kF8dg8FFx/0aDV7NKefmr+6FqBo+3UuopDafp/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-snackbar_0.21.0-canary.9a566dda.0_1613759859057_0.6126528474812802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.55addb8c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-OoXTMqe4c3G18LvFttflpBepmrKRilp+LFwL445Mb5uHL17M/5wMhMYBrFirrvXevxGAiZCCC0uJdZp1CjiyRw==","shasum":"7634b3a2803d863186042b9543a35d868e88913d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.55addb8c.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVZCRA9TVsSAnZWagAARDEP/2zxO1W2CpWeARx0+OgF\nzWt+jtfT4iuxMT6T6zquVeTCKk8ui/TY09lp+QrR8e5FI7In2l+rc9IBVLNa\n+b5ae0sKbydVWoXvWtFukuParjRKDwmpSViZcsqhDMfaPm9X8DQN4EoOw1/l\n+Ydjm0sviWuGtsHgU3zeJPtyS/+7Vunj5O3e7G0rkT7iJVFPU270gmznXF3Q\nCQtQVpluLGEAEdaD+KPztbM49s0ocU2o9/7dz28wyOa8UyHsP1L3BELxhsdg\n8BjO1Jr7phOVnx3ER9djnRA2a57WJUXGUKvJy+ZuKUQk0dlb+Q3wh0fqkDHX\nRTBm7HGkIgW3c+k8p7pvugrbajFesySuct6QetGJCqOBZIXJFZoQxsye+ESZ\nUa+0nPmEPrzdvzCQ4hnknmSzbPW7Z8jo/J7r6SVbYmD3btCfr5Tf5Wb+qSfa\nIt4Zb5i5ZlDCvUM5YrN7f+mkCx1f5ysIFrnbOFtt26u7heGdXG5NTMHSVfBx\nsIVAZX1RyPn8kxhf6iTNCHi4sflPwHVmDk4Toq3uQSiBihIbrstvM/x4097y\nnTZV/trteUZzJNLvq6CYkpa/dvWI929zFnuuBEx6MXbD0ijcoXsVZVFhy5HU\nrIHJGzTsSFL0723AI8y4rBFKHvhyu61QQHGqZPXlRJzn7Lrdve6l2v4uzhbt\n48+v\r\n=iIdn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYvvOzkj+gufx8KYz5Qvha9eL/shybQlavOXAAx3JtGAiAoIxwSZ9M/ol+NOaSc46EJc+X3ZPRSyPJkz0qrGbZVNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.55addb8c.0_1613772121314_0.5775469602936674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-r4cvKb3IRCvSNCqMTcXgbf/vNeIihUF146IppOeZ+KYIgleBpe+mD1zlE+mxw/LARImWnnzHU5ZNKH8F79oV/Q==","shasum":"c3273a24bb5fdf9505a35c2d4e7484ba6521c5c8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.85dd5e9b.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYTCRA9TVsSAnZWagAA79AP/RpnjMJp7PnpouMwIExU\n23dq8GzNsSy1lbMx829aVd4s82CSY0CiB8Ly2HFVb8Gb5B2KTjLRilfMePoL\nn01idwAioPiqHgohhEC3jR4I/JGKdJpC44mlo1kLjVtE7j/3iiab86+iD7a8\n8fRCCLDd62a2A+GPsDKo3F8mKrSFYmPmO1u/ruojGotm2e5or3495BoD7l3b\nmRYqfXecYRRHVxnxycLkcB7jdYYmqtFIWuNvFYeMp6FBB5vcUWBkOixh0Ia/\nx6Omma7Od64LfNuUZlr2KnOoqNCDiN45xp5/BTZHWLBifN2vVWKucbrNP1O+\nRKERI+t1RiE4HbQUx8DUaTwjAdTKouYqdl8jny42FEyddKHdgLZ6iwIDG48b\ng6diWoopTzMGYS3mQJbNXnoSY3OmI1z8/6rUXFUi5PGlPnRhbV+5Td+hJ2gP\nrNUmQNWblH04QbkmtaZ1ilOXfgfiVU+rYfMdrelRqS6qrv4ihFe2xB/WTp/c\n/5kjB8kMaZcfGpGATjUlmPkNo2NTcvWhqhp7zwMG6W7Th9XFEgC7gpcqfeOp\nBmdz7XXTkeOwau6XYfR5Jg7Rf6+V5f93QHAeHDcBkOPDczGDNia/hCs3U8eE\nGfxsPD9muuIyn/qZDQN2qKdg++yXfCjaF4sfh9g9ZyWweZXrQHUObQMnZxXR\nNnky\r\n=ZDLz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzfGiTick2gNjouf68B9gff/fT917hMq5+Nt2g39r3+AiEA9ttQFj2Yaof86YLLyU7NkBNzAub6nec/wsdfanzEW2I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.85dd5e9b.0_1614046739404_0.2652747117104419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.aa3e078e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-PIvfZhxvbaXkrbb506I7cpiM+TrNrSP2S94uiL1+r0yHVV2CqNwtlDvVtcLnno9S2F4d1HplY34XXzLw53X0qQ==","shasum":"eee1b55dac84299ce64bd8031b22ea999edfd6ef","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.aa3e078e.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgBCRA9TVsSAnZWagAAfRMQAIGYGFJ49ruA4O9PEvbi\nh0h1iy+ufXjyFvpeUGpQ0yR4IkeMB57LY+iWNcnYu3OHRPchrla0TZtkJX2q\nZQd0zGDAfGQxw5aHfhoA666CvQ3mKBO8VlB49sZN0PFCudwL0zS9TQdiFNJc\nqK9+Rgns3twRSWXo5h4HXIWhEkKi2b0PDBNsVGDW+4xeu5vVZrHmU4Suijjz\nilVEPxTgDc/SCnB+QooPnIiorMWqschNBklPVvgnEefMDoMgGcs9cm50jUbI\ndgRl/2RdM+DQkvwmjgKHn30f4g2qwYapQY8f5stweueSM5d2rBC/3YB1SJbP\nweYPnsGLzH/KVuK7sUhISAHoB00fPxalvPKQlVg2Xir7j9rKfKgCOFAXzPRg\ndSLpJK464BP+55YG1X3cMAsH5ncccBXMTnAAT5+yJlSqWBPm59LJBemwK4JD\ny74m4XzNFu+c++bSk98gn5aZ4TSQqFtgbJjlN/30VsYZs+AV2NINwMp8CajI\ng3p7g5qKFXqW9WNDeGiTsshuY7zhs3vrySsWGi/5P6047lvRLMZB9wCe+rVg\n3ClOGhlor9dq6CcuE5CvJh4KpWagTo+lx6bpOYVM8/l3+63HUcfkTk/pM3u2\ngBArsF/vCqz+jEGr70c7wLF9oMsjl8VzfwmB7qm9f8M0wnU7tvo6KtGgPG9o\nzHEI\r\n=TSUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBLoLNJHyOCNXeiK+RlTuF1ByFUb9JV2pHmz9RfTOVrAIgDp2Y4AxDOd9dSgiDb/rEkcwAMieQJlaZKFlTpvhu6sE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.aa3e078e.0_1614100481065_0.37111249041261885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.dccd254e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Es5YxWi4fs6FJoQuebIostP7MDwmpNpTq2E2nWhQUMMVH3jOkiulj67nKCNNo6CrtNvpN5Mfe1YhPcpsfkwqJQ==","shasum":"92dd9e5f6c565b9fe03035e008cb64aac727df36","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.dccd254e.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWOkCRA9TVsSAnZWagAA+9YP/3DqDsgy3Rg5xRxEuXEF\nisqVFLJ2fzFvxYsKDStK8y3OoP83DSMCVTAjJgnb4sZ04MhnVb27xcP9do4l\n6CjoqvOS7haQKm/CJXo9D1vH/XPu7QND5DZinyhrZaT95rGUUQFVBKZFW6gD\niXjcKMIZHwwMtzLldgR/5+gBX4gJFdOce9LAvvcUWtX7nyIKu+0/A9k/9dy6\nhZMUuxbqr9L/T+G/D8ZVx4UYNsLwwaFGQbGfDSBH5XwDNTHWBXnuKixVxgen\nyeNpvOZgtdxvyTF4Vhce+05ynsQNo0AvcgweOw1O48q1R22yQdsaGrNcUxLM\nRy/PF9zadozID8IOCZNqbtAW+HpJoAxTAFG/FTYK8MgkZGgIc9nwtkzrpEzy\nuLZ5B1aln/UjEgvxtTlHW+SCfGVmtM3wdGLrRJYirRV14scWlg0HiVrA8SaV\nO/I3TCGPliZO9fCzfgysBnKsRT000+uWuTtKWRNANNtpwF8453oH0zhPTf+1\nY6WaN1zzdJrK+eIffNc72G6ZrIzRrBIQhylSKs9cyHCJwkphypRqF+XbBc3Q\nf2joDHVQh0c/ajT22aly9R/8upFq9Jz3BJiq7V1x3kbtsD5VDVBoHBGPgEx7\nnz3FsX9d25uZiyAbkrEDKsowF7sTsKKx/pkeIS94WcYZSECgwnZxX2dHFm4W\nhlJi\r\n=axKZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAq9nu0eYxnJVNbJmd7ju+aBbRhOa/bFOZuxpbCKlN+2AiEAoFca4CKNlzCoxsMGVlBKVpgINqAlMhY/hmyUn3tOIQk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.dccd254e.0_1614373795923_0.2926749886809421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-pmTMrijKWov0Gdxv4IASnTk4abbq8IQApo4sGOdK4L6OoKciVaU3z5ydvxl+e2LZh2jDEpSHB9yNcGR0NRxlZA==","shasum":"5a00fe310ac31cfd5edbb5307a40c3a975fff783","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.7dd1a27d.0.tgz","fileCount":16,"unpackedSize":67494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQVCRA9TVsSAnZWagAAkfIP/iez4kwxPlrVIIoV0b6d\n8pjNlKPkF6Ul16I84yVEEUliKBh0ZBwRFnv5xcRsMdhovNLaeYkL58snDntB\nrBFCW594zlvStx+J9CSKROeR61y0GZnwYW/gckM1WcYYD0X/o+cAVLk2K9ln\nMeStH0ylPCQ1orF9U0Dp6Shu5bFXe1VUmPDmTcqewHNLe0yt6Pydcqv62Ukx\ncGEsh61XwcbLZG1cHWmgQjHX4W8+jLNSYwdwg6nzNon4w7dHlUACjL8X0X/z\nj2IJ2Ubc1VnTlJf29p+J5htl9QSYnXm/F/xuqOYlUZXhiahZfQlAZK2EdaoC\nxOFa7O0F93uSSOQpeqPUo3gjopQMgsn8A3SimGQjB3V6LqUfkApAtHES7Q6B\nafs51ftJwc1imUMzkXHEiRlfzB+AA4kMWSr7oxLpB/+TrG1UStDDmEVjw8ju\nlwHMQkRtDPc2QcNCRAMYOiXxieeVPFgmIYlArm12t796aWsgLVUqjfylIijD\nGndQCzSR+bxMbGqaRiHHWh/t8gfgGOvzXdiaxfgo7gxnC4cACr3bQe/gMAbi\n0V/47DvPGhe9J1CktMHczfe4zx0lVlKXINRpabveUhm7xqwWavK4UDOn8y8g\nE2LORUPTjxAA3IfMmddwhuhaytKbVVGz5s4KZOgi2W4F3h8PsWz2ioDHr4pb\nDB6o\r\n=6+CB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEIvv9AtrUgmjSimJiEqvvQsJhWlPGzG7JPI9PMS+35QIhAJrAqLCFMA6x3elCLOqjMGVD7Q1Dao4jG8L0u+sJb9xd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.7dd1a27d.0_1614636052874_0.949513593149814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.12574572.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-hBSuSqOG5jNTBpd7Co5BCy38IL5ujRUFUPo0QcLgyc/9mXyFF6j0rwm4DznJJVomY4Y1AFEinumHvt3CK0qn/A==","shasum":"d418453ffb8ad52f81c8e22f9a17ddec782cef71","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.12574572.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAUCRA9TVsSAnZWagAAgA8P/1Y3oi2AmkwRCDQWDp3u\n6T48X0Hvw9DvK85JdS6Cab6Rh2kFyt8L93HffbD2Hy5P8DsutjlI5c41flK5\nPt87eRS+Z07u/64o0P2ale/C3195wj2r4y5+GAer9Nq3MyCDUZqgZQ+CfsEU\nToJzAhhW+6dowKnTHSDI6iiZB3Mmu4EKKIhlhmC+P0+vx+a7jLchW2WBC/ug\n5kigAcDoiI/iI1CkJsfxA+j3IVbDJlPNbHILIzKbbbbLaeZaAG4RgV1/IqeC\nj6Qtp6em8b8gLhFSGGXSc92ds2+2lh0J7xYVaGvpQyFLBRgrJ6qfv0Rnq2kJ\n3+vHERvL1jMd3AGW06inDiUMo3NPeV3o+RqfTJSqfbkq4rGTbSxsxSBizd6h\n0lj19aMWgyfNNrcwTjaYIp8OerWplY13D97tLlyig0up4br0P5/cyQ4/zK/D\na5HLzxnvLDz38oMcj2mmnpGbjA5f3d24SBdBfbyaHGqfFT1Cp10087aPCZ/y\nDtN5FN0QIYEm0TvDs1juZVkiRhOUy+xX3F3XhTgXdAJYOPVHUqNP8bUscVEq\nx3KZCfX4G2Sn9e+vdzVy1ckbI1cNaqqXRH8vqm6Fx9nMJS7Yl8Gr2NocZRFr\n1a70asxpjm0d5cYdRe2SbsSqsX3G3QYvqXAABYUEv78tM7L8IgCtFlKsUIf0\n+xOq\r\n=wk/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJw0quoPb00P/5zBGD2ky/GqUqPeiTeQ5/wTMDmN2fXQIhAKpkb9niV06kMOthSAeroiHP01vTXrt1QTJT+jaHuhGu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.12574572.0_1614716948529_0.4524596874786908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.1109a3d3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-cB0OT1TpQpmcqoo4M8f2MFXvKN7oEl9xZ2I+kasNtcsueNL/+GrouozsOiFVPAFHskAtt1KUSlRBV1porqwzZQ==","shasum":"a31c513f5f9e0f2ae20b7bb524a99be6b0060501","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.1109a3d3.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFGCRA9TVsSAnZWagAAhMYP/jtGLrNzs2P6zxrIqvHI\n+0TmODZrGRu4jmwoaj+8Pd9E/hhvNjg7AACneq26/KPkBFIEJa8nMqKwCn+f\ncCKAOrZD8PCAhs2y8ZzKp+1YijoBAzYK2Lrxxlx7xyafusxe/XP8yGqgMGaz\nvK7jpcThNyv1DUq85Ukj9q5fNUQKYTkWBRXeQipN+qIkCyzmIMxZJNs0YovI\nkgLMMlx55H1TURwT5+okKSziFLHu91GWPtlAJY/erUT4tE5KQO2kFhwDuO0C\n9kivmhuTXruJfpI6JEInrTxZSKa3lu4wgD6Wz6hkNtGO9N5Qi/bQLiRqVhD8\nEbUpds3E/y+yex+cDmFAEV3p8SX+NfNlnrNaDkl77XvgMUNdaAsFmzmCBUdE\n+vU/8Q4upSLdO3nUkJHwxCmaFiZkc67eSS4C/Sr1uh93yozaUxQ/2dKdsKg9\nlhVjLSf+ffXdk6G89VEhEith9gsH+V6C0e676QNgU0c0Nw9RhASFnSxqwl1+\nsB3DMsaOhNIcY2z9ZuWV1fk1/TWeiS9Bprv2dlqdvS6p4w7AP1NCYKL6PbF/\nCSjjIEYe7swmLhc/U/v92oQcdtY41NCKL91aO7r0U+BiOA6VSLkwIRaSL7P1\nQzAOREE2Jq8QdPS6UOgfzzZBrYL3SvdLGeOD7QEcizAblYLJVCQqMDQAgpdx\ngUnq\r\n=E5lt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX25QOCr7g7AtMyi+74mhqlg17JMkV+eqZDPr15qSwYwIgYHNZ3mjqneO/Hbn0MhAeKV1ugJRUXxkYwgIzCvbrTRk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.1109a3d3.0_1614717254139_0.9940524638093744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b9cd8739.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-VqOlT41wgRU0w1z0gr+6nDYFWV6By1ZdjFvCtCzDeqLCaDCTy3jifmFUHnsLC0jTt6UeO6dApIexCrCL30GTCA==","shasum":"6a2a733dcf91c65257564dea7977d36df5988aca","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b9cd8739.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8t/CRA9TVsSAnZWagAAdnQP/3yEd0lVPcplFO0AEvG3\nPwb4Fgn7eSsjttXgfbvCFUzfqdJg4kn3tIWs39A4y9987ihgnoi/WcACbtAC\nn8tctiUuYF+NqlxtOuzh0EbZRbCJcSN8l5XduTCxf2Ww7zkvXC9Jqvq8Yfha\nWuX9JRtLOnTcSosAqK/DGYs2BEJ5XCdNx4sejUUiUcaxDxFEce1oVOV3pykH\nAmB4yW28B7ZJbbdxafU5/DM98Adrg67LigR7y2NnuZ2QKH822s6empLNIRI7\nFMiccJdnPOPPPmCVJCwfBAx8ZKlfRRm2yik35lrZjDEm8r8Bc8ew+8JI0Jld\n9FbznZdRUU0/fqyNWUEZIR+ZmzCFoyXz+hoBQHzxskCJG0jlHBOeUWqTIesp\neUtcPgSqGP6JLFUEkiQJtVdnd7wHhrNRKv9JjFS7ISW/0J9YwbJ6gQepz3zK\nEYLh95Ejb++1Grrp2BkAPkLhMfP79o5PpT0UVfosG5uAwppoa0lXp+u0delC\nMPSsWfBN5wPDQKF7xlptEpSlP5VJiOaE6aj86/FWCVYFJePh9eHQeGT2ldju\nWYloQLwBskvzs8voIU+4R3L7FDI7bX7JUppDLH6yKKUFS/HGE8SrBzDO6css\n1UUTUzTspyqYfo2tgG6pOgGTpNdDqbrfHgnHIn4EtvU0LlD+iUndi/XViwns\nZH9Q\r\n=ZvFB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1KCUJbdkQkRZJ/RYco7gGShiw3WajTcX7zCN96ZcVbgIgOE8evyt4u+Ewih2gjNRPJllxhkxlC7ifUeR4Yx7ddiU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b9cd8739.0_1614793598986_0.9937251668834324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.71ee796a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/snackbar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-3EtWhZ2HRLG7U/dOiSz4oxzjCcRT7u+VQptRaqJFfa4BvRR1vDeJ3yaqysQKgamMaMxUkwvJ9vphAcTPqjHSeQ==","shasum":"8f26b194f9e7f22b99ac6363f1eaa0905bd866fb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.71ee796a.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1FCRA9TVsSAnZWagAAgxMP/AmscM+Fc5R+d5Mwq+X2\n7ZPL/2x8E8R58JhyOwRWITC5+MuoQjREXKIgyzWQTFtoR8p9//p1xllWW6e7\nqfNdJAFoklBJIl0XJMUiq6nibnLG5AzKfCy+MgmizI0VQv4omH8G7W46gdfs\n9UP4cKWDOAQixZTGHdwpVVEkfTAGzpw/2X+ZZPMJ9fCsCypWQq619VKtGCBF\nl/cLMfFhkPkqrDmwgyLEwXO5LVX4kd5bfVCdhS3rOQ4vVNp0v3NQmrebFIph\ncQgzXChN60HQAKKivdqHBhbayydMg3qVvLzS3Brf/SrJ3ZXcLu6n+9XWA4mL\nyxwDb40emZ3o7G2xiyGAXjYXJaJxQSedzeX9Di/cORl8Mlq9fS9q6PNjlNhA\nbn5dHnyvWHnrxnKAXwUcT1yGrKSkZu2AC5RuUzGIEhx2JlDsABAb9ag4Yg9x\nSWbGC8tzM1AnL/zU2THob41x9ZzOfNRYcFYWSuWu0jxPGoy9mIS2ErX9CTuM\nFSya+pwpqKD1shik8okm9GOfAs0gK1KVt6gOOIcWxRIJHqEDGhJm8MKnmcvt\n7Z04xmNqb8phnPtAzHE9KE0HmjBNx5baso8WrpUCWMQNij4qsTaofLyHszlV\ndMVEgCEeU0qiFaHdcXAxqP0FnHnYp4AFU+E1r5SUnt0W6FkquBg7OuEdrcXZ\nXL+R\r\n=ZKXT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJjpiY8ULJc3TbKTWq2sHfC32EOOsEfl6k4Avc/hl2/QIhANR5N2Woxwb1u1BUMiOOpaCFkgioXIy8DSx35DHjzW2j"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.71ee796a.0_1614802245454_0.598308236488198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.2be191ed.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/snackbar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-7k/xwZn6ho4lGqhSQbJtvDX1cF8/Kfd6yRWUHxGgUkDYCSSwjs73dYIS/UqdaSv+f7U23kNxOX2eA7qhd29n7Q==","shasum":"65041a1465aecf4267e56847ed7a5bb15eef6f8f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.2be191ed.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATWCRA9TVsSAnZWagAAYGoP/RVb4s4UWw8G2VFa8tnF\n9N2iP5PD6ORum19AWHDt1vpcD7nK8MiT+tMG1QxcuTZF6PMxde8drHXaOxLN\nCVuyaNNBNpq3acmRQgWpX2v7OKnfOP3xRy2YPFPXVzjMkVelHa8cxZolSA4l\nftiFEQfmSaxnBM4+3JrB6A28+cX3xZ9Rvhfy4xnklRwo6HglYIvPQUJlXrVx\nlbApr4GDX8/3apY9CkOG86ZXeaXSLw9nJ/1sbldBrs6k4XMb59UhIsSoMKx1\n/mx42dZnH/hu/2pxUy5B80exSfSN+GxAxbOUYT8iguVLKnvabsWj4SNl3ZY0\neae2hX6imsyYCLvYN61W6kt2YyM7uuG2kaV2n+mgTFHuLYCJnQFSFRauB9OB\nCIol7Qfo6o8wzkvXCsDS7BP5q2smyqqkA4iICmsBWr33VgNbCp/3VOxTJo1K\nBhrx/fhEd0JUL0El3Pgxu7xm9Igve17erFVpnvcyoHukX4exGJ6jbU1UIa30\nVG23px6IqvNZuX7Ya+p8OcHsO5v/FLzcJVORQNduZ1jbhltZDWqk+H9wYjWw\nXbxJ346PtDbSdprx0Jd1fP2435CWjl/GQ5J2wz1gRPX82ZZVUCgU2f42w+cX\nxmy3LSLIQ5ea7Dhq+89N+g4oPeCRa0neRwvsvDgoPyabz4SrkK6tmA/zGcOn\nkvB0\r\n=jGcy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVQq+Vs+o9vbDnnJ4XCJj4ApGqVmxTdm+aeuHhkuHg7AiBdczDoG/k3Zew+5XjiiURnsCA3kpm12FXQEqc34OQArw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.2be191ed.0_1614808278209_0.20228716289368287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/snackbar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zPSVM2N59vQPB1KNlfphU1HMUXvhf54xStsVnjpabWvB9+mDMLez1uSYtmkH+rqJHgJY/slrKwIxYbn+Qs35sw==","shasum":"bd3bb44d9857558245968971e139516c809784c4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.6dc7b06f.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXmjCRA9TVsSAnZWagAAi2IP/0kocnv/yg+OLPGX9i3x\nNZMb1FsAqvoVEJW3W4dnyEBXjRuNPGvZM1N9IJ+GsUePaeKwNk2UyxXKY2Ge\nlIdSoFohd0NtFD71y19wMmyk6XxoAzKXd5da0DO2wQ6VCqT2Yv28kNsuiSME\nwIV1hwVLraolxxQ8NbfDoRMCBCOslVNQhKiSaPhOCfeQgwGHJTy6Cm8mdOS4\nGpggKNiRrjMtdy75Ozni4/tnWGBbZiIiWi+XkQMR4ANScqWlyNwoWtUXZE7x\nRn3nSEYjDkcebOzrnB45JZ6MJGhzB737oP63ySM7Rk/PRInxYx4IlcYvN+Zn\nPIIsMHs5ElmsAZ+wTddZ7YQoVCXxOX7p7vB12IAw4vUYettkR86DSQP3Ynqc\n1q7cspaCZMnBpKFlg51aXwhS06MbKRercyYZcxQ5/t71JgoHXndcQCNN2qIH\nYLficV/wIu4C+Qkomx7IDIccmr5b7hxg7PNbm52aOLcf/J7JsBNHzUgzGgp1\nApWourJcTBx/uqCPRVC8dCGcw9F/ucBI/iQqPSjMnheU7nwN8a/TBZeHjvHz\npUJFeA9hxX7q8TuMlMNo9axGAxVMDVp8msyXf2esMedoXmjG6XTKqYOyKY27\nCjWfDIxT8Szlw8rBSJjEBfUcZEtmxfy6M25odyOSLW2oL6ZsnWkgZLbjBxgJ\n/3lg\r\n=4M0K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5Evkkao3cj9BjlHl9ismNM+5gNARdxaV9OqRAixzf6AiEA9fgR3cO9RQ0d5pJzKhwW5K2DjvBoO3D2V1zh+UYVzn8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.6dc7b06f.0_1614903715481_0.033154228271381925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/snackbar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uOx0nONOth3eG/qTrq2KvPaBOQwbx2qVwVjWWD+JTavcr4CWISE3SnrDdIcs7XhMjpqJvcktmelpxxkycdfUtg==","shasum":"248ed39113c874fa586295e49577ba48e3bb45f5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.24fe7ba6.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmncCRA9TVsSAnZWagAAE+0QAKGBqg3E+7DDsKxhergH\nHWT2fjAgJq/Ii2z1z1HgkYsdh0mvziitXnbd/s6dAfvj9AFNwie0KdZyPLux\nB+eLpUpPOyLzvJ6NC3H7KzHf1lkiZ4G0kdxqZNaB/0+8zvVWak3oSw7OHLkc\nADzFqMX8DBXlElMko8R3UsfUwZ4d8T+nzt0fRCzsa3VWDgRsEC8v5rS0HHm+\nK4xPHBYJONkDMU4NwLF8QyCJtg1KvU26dIhNb+wAfA2sJObLOUxCJY6xmeET\nEMgRqCgGtnZwDw7pgMy6XHX8FHjo0lgsZkXB14pAv4bEa98hiDlQLJR0OTbd\nJpkqREHQDf8f5POzpD1JA69g7nJjoau80/F8VccNIWZD6IDec/lOtt+lrHpW\ntHzyDXNvpuQLLxgML2tYe6Y46yo4brGHty+J0HCHrqqOe0BuMMLtXcQbIGX4\nGAR9FRz5iTzsZn19+HMQbVQZ9Usw8aTqUArT3P50JzzBaSlLkCDVqrYf0I8Y\nHOoQwiCd1GnBbOp2r1JP2tDkiTj4C5A8TVOPFF/tXBvkSykzk9P925GfG/Sl\nD3ZTdHpkJkAeZZLTPj0/f9X9/eHBYcvOgD+7RbeuQEba6hGSl2x36apomlEt\n1XVYqMV+lsjvUetVfHtBZ8DU9R7TD0U1EzRzc4BqNqksovI+BhHR+8WLKlYw\n0hzl\r\n=S/Nw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5vMsnwpPUOV6jTEPO+VFRPm4LCTRhHMU9Le4q44eQXgIgSJ/TVpBeiFs1ApdZ4ZQQzWNf2s+j2QxZRdAGDMXBFU4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.24fe7ba6.0_1614965212042_0.9317862345093477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.12c477d1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/snackbar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EMef/ga8wc3e047q6Kultim034Jn2EkQ+UaQVHAH+ndRUcl4jdGROhfHDUeSgzGPGCX9ng+Dcwo7rR9+3NbrQA==","shasum":"e64d35844560be53d72836591256a3627752f25b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.12c477d1.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPVCRA9TVsSAnZWagAAAPYQAIZ2rRlqW7w1X6WZzByd\n8vAaM0++kHqXb333m/qXn5icBHZx/sUNKC/OvA+JHOAL0ZJmreHiYmi4utSe\nUvoB91BWnvaH8zRSfjPpcQDml6FwMvNJPr6ADUI+C+StsHS2fMoCRP5phuzC\nvFYAIXi7qSorAJI1U31wqhscunyyF7ZhTm5jOa5tfpnxo9Kv+O4weYgB2QPp\nRIDWvHdQbXcTXKgXXVf3Ju1hTRI6clMVfmEFFJYMK5u51gdk1SFNKeCCYalZ\nBodaLWA+Wm32uayXyRgCiRZkwqYm9LdKEuQWrWUEXLrfpXO6+me4GKE3UdeE\niEbfMOk8zmQil4YwglQWT9QRqYe6OYKKpFDCuSrPy0iMXpDDH4MIjevp46Lq\nHELxHvzRf9ztgvdrGGxHLlMvZ8hyfmlgtL0rwlss6em/zdoHTVcwbgWKFkLQ\nYZ0CZ2Fjro8c36V4hYES2RMVpvgJOmXwqnWn1jjd5wrKzR+t7jASKTSkc95K\nKycx7/pB5Li5YnFz/44gIZcOJpq2TSZXJKSL3DZenCHcQ7tPX1Oi9PjORy+U\n5rsDFVdZkKyyCgymQP8RKXhhawMAPm8o1ZRd7WNLc6zYdqLcPyqSwSfmONja\nbrwjIaiUY+OPkeMNMXJiO3tz/4QUdqyRPDSJnL8v9e+9eM8tlvmnIyUEqjip\nTR8Y\r\n=ZZH8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAa73aOBVqz/GcmjEgIvI4OGKaHeNL/sLWOKeSoLAdf/AiEA7Vzkyi/rAnTPYFIdJvHGxQxwSPsn9AcwmdkFRbmKoDE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.12c477d1.0_1615242197254_0.2356499417512372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.4c38f801.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/snackbar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9Cl/pZcoC+kKIlN5q3yw/iSsW9OOGcezFEyaW9RmJBUVEoDxklNvTNDo5n4scf/jkIVhX2LAJ3+ncZhzcFAEmg==","shasum":"059935774449444888fcced5ba9dfdd80abd32af","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.4c38f801.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrIjCRA9TVsSAnZWagAANWYP/ApLkFqatFayZbkRNut0\nRROvWamTVVhuA18OhNkOswt/mR91KdYyL2UNFLKoUugsqRqJFDOYYv94OQHD\njOuRz/OoWl2xRk9R9MIRwuz2K4ODi6OjzzBTExCvA2tVumKULOPcZ8ASX6fQ\ni4zdCS/fDP12dfkzeY7NM7oGjYyfzBKzHwPPNrPC+kVBuf9ypd8bTNkhj2dp\nLYunl6QyNOOCW+aZUsIIlkVp/WfLUppx8+0gxQ/uiNwLgbn7Sj7d57wX+LCy\nntwHz/2S1bwWQ+DSNQybFVSylz7uAkvGy4/YdsKY/zWND65F6a47+YI8qwDr\nOeR1r1MYyVm5ugpkWsUY+wozfM2AtbL4XZqkBiCSk391pRWx9OrKzeZJ7WDf\nauaV2KtquTvAfxtNIavsl9SGrpto/GlS25GjtVkH0sAO3xZa302yw6pxJfry\n75Ak8NwiyZ/DuxZRe/XzrfbUccg1HZj1BlqZhQb6Q8E6FefOnOuQi6RDlIqf\nBrU0sBioulg1IXTtwqtrSb6QsfDUhMWWP54Q2D2g2a2S8hB4L8AyaIwYXR1G\nym6zDWdRuR2Gx7kzRiJrd7sGlRmHHlESzYYbXMdqD8MSdEjDr44VCLWVGn95\nJdRTDqt561VZQYe1TnPKrsOX7YmkFBekNxpr9Ll6mqGhVucZuJqyncJhLWdK\nykJC\r\n=pB/8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEEKBQW3nfm8R0KZn5K0gaXHj+l/aVgY79Yi3xIsWWqAIhAMVY8DJwVRtFIjp/jcSJq3DwxaROBEoSOh9zjM/H8FP9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.4c38f801.0_1615245858776_0.26937337252771987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.8795b83f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/snackbar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SwbFK2pP6udCT985Sj/mc5TjGohpugqI2JpF021XDsf9AQdlxQ4rcnQjsmJGeGeSkML/2qo9XwK/7S0zIXLpzQ==","shasum":"13bf63823b7704208b8d5057b659b4fb23df567c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.8795b83f.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74ECRA9TVsSAnZWagAA7AAP/2jFwXtIcXpv/vA1fj8U\nwtZFLjWQacIzexBqd2v/uXp0/KdHaIrKiEEaLrw6j56V2r/Q67cTRzuyWRIu\nHzBW0HXT236JewbHUgYPL1sHH5BUsFceAvPReTopgvzZOy47jGyUFZ059v4X\nauw7dFqVq9tqijYhF6SGaqmxn16yE4wD2Nq5uDtOaiaDKB/9GvQrEE4TPu0l\nTZcUK2EfES2veH8Il43PrC+rolL52dxnEHy2ft+rAdl4pt00EPraEIEr0WTW\nyxDUtw1uaEy01i2BCFWDm77TJ1mpPB28rff7Y9/StZBVg2zYxdLByE9xlFuu\nPvq0Mm7GuazuB9+9wtEUDGWACu10Cd/OS1aNHvkCNjUvvbv9me515VwCQqNc\ngw3QSNVx75GG33e80WTgKngrBGMSmzyDqH8KbY/3SZ0lozozLqOuvFt0Mnov\nute8pk+kfMhRBwPdsa1zUuRJiAPd4e3vYRiFGqhe62Erxl6D23cCLnOH+Vya\nGOV6JaMfT2XRev2iUkNGd7Y6JgJgF+QBfziouCRyP2RiyrKJCyb7DZq378nI\ni7aWoGrPDklVCXtFBPRyXXq3i54pftfmLt+f+80OohVaOzT2gZmcAAkDZWEo\nGDgmyFClEfzfFmqJbTb4bdVoqoCmMIZSrEcRX+SM+DhXgVCjs7a+Cy8O+o6n\nibie\r\n=qQuy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHuQHLDicjampzq6cdkf3+3aJG/M5lQwH2J89xaJgZkgIhAN3iwauDyIBgRc4fAcp9fABgGu4fLM3YiPJJn6ZIiIn9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.8795b83f.0_1615314436421_0.6354180377113257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.12b84cb7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/snackbar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XMrpRKyP88+r+UYhXTgEUFZnbJTOCl9AbWKfOrC64V9VjXwAikNKvvhOxWqI8uCkzz4ck8VoknH0ZI9SzvU6EA==","shasum":"8de18994e6fdc4fd975c70af2706d5a599e05dd3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.12b84cb7.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWXCRA9TVsSAnZWagAAxngP/3O7uCwCsWwhW6Ia6EqS\nBx32or5bER3Rznv9YwmZMTAjJxUfCfuGx9JqaYtwbKgiKGASNw+vgxAWtXJs\nT99507udJxHzaM6ed7IQgCcoElO2SIz3W3iCjuc04zmKFEzIOfE1XPELC7Xi\nkfGRiO4aby8O1enL6dR4GMtFu7l4xwtssdnUVnYeLQeiQlHxWMj19AQYOsuH\nbJCEtmHNTFtXiQCqgjv7lfTnMG9MmHpucALJZAJwCVQbkrJBYjdVIw2pN8r8\nL+XdKkWK0+HytkkNTFpUnafN52epa1tKKOjqB8PMk17QmdLGS+rn9ZtOzkqL\nOu3wN7W8lBbbxLQqZj2dObyooPUR6PYPmwSzbSsl1iG4BjFsY/DeI/rwBf5X\njqseKYb0iG6KZdaY/ffmK5Pq5kA3A4dnPOmxQ5PuekfmvkYErcM6AU4HwREk\nnc6Pt/rVX/nN1Nl2wZE4kMs9+s77pfv9vc+JGLV2h7ilaY1ik9YKpspwtJ9M\njOyBrcMKAs0OXcSvaSElKWyP2F39G8XqxAkdEulUo7s+j1Cp5xyJu3eWVFXV\nVDFVtT8V+P8GIPe9rPckeN/a/UtUUIGHHBHnaCOai1B1KJsrY+TazPcUDJ6S\nWigLn+vz1SeLicITwhgq4jChfHLCuRrH2FZc5+Ma/vxUrtY2Oxr26U/Ev9V8\nM1Oc\r\n=UY7V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH71CRI0WXRnQZjW2+TV5ew+NJc/WsQfLJGB0PF/uK/bAiEA2g5Q3LDSiq+XttKWcOgPAI9iU9d+OcQejg5dtbvback="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.12b84cb7.0_1615336855398_0.780996994098424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.6ac6784b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/snackbar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0A8FpbFoZk6ksoOlY5j2P7r08qZ3rp1oehFE1rTTYR7mLyS621Cif5NJFOs2buDCYvUhxLoL2bgGribbr7oqGw==","shasum":"6ec45e072924475fc877dfb4b2c6def64b7d8d9e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.6ac6784b.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBf0CRA9TVsSAnZWagAAcc0P/j8zjFBQ1gsgeF4/sGjP\nWg4DmDi/n03VVhEXgSSjltjcfY8dgu7igBcpz53ZVNXazfeAqb2Nhf/2B4gJ\nhSXcTeLvuE9ssTlEyXmAmwPk6urs0gU/WsG87qjp+vEtqAyPbdpe9PG8qoP4\nvBuJLqmLrwvrScyezGUhVqYXMLvP4Bw3hMvrKIcMRR6z6TYQea310Ve4WkE4\nXSD3lYy1fTLkOzW4eehX8u+QnUtJdnaYR7oGn+aBSrh5/bR9gpE1xAAe+WpV\nDKsG3PrQBr+aOXKO+qzxBGYa96NHtKEk76pxoSUY0g7rQafip0ei8T55m8Bu\nLucC1Cbu19sR4nVAevbNavaKAo62rItr9y9SxT34vFNLlVaX2EwZTb5F2I+l\nXpD7RZDqpLjAS8oylvVYSnabNo8zEw8FY8qhdGnihRoJXKoM3WrJHTBvavjF\nh1g2qUwDj3qas8LLv/RNyP+0qT/vmoXVPCB7rkD7wdsJaYnoVGBkbCq05DX+\nmYV8Smi/pTgiY8e89xmVN+jGNu/56EkY3aSMAU9+yh27cwDrGokETagejojl\nv1YV52cX7QL/tdLBFo4vyJkq1gbKKEinDUs+OH+rACjOQoCOx8L+kKWCbyxc\nFWsbmPYM2U4ljQ8SRiMRR4151doPxYaMiv8BR/7tjWZwNsGpTQ+/1hK4nU/w\ni02l\r\n=tRiA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu0QGTSOEwiyJSVkk2uTxg1Eu/k6WKjf8l3TW4IctzaAIgUT4V7CUK1PBLsNaVmGL1PlRgl7WhlbH96TBKpJLPIAM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.6ac6784b.0_1615337460380_0.4198541038716612"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b6d92934.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8Wx9v4R2EFxlcsBIhFW6t8oSQ3kqF65SV6WV4YDKxnD5Mf4EO4uR+LR9aAMh+s8xIdkRRSM+lOZs2chTb8Vl4w==","shasum":"48af40636ffba8ce630269f40de0bd8fb6f48203","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b6d92934.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGICRA9TVsSAnZWagAAJJAP/1Nxz7idubLozBvZVPnc\nrbDy87fLOfCC18vrdMGnib81PqloRnJcAYZsVcS6JAlBrfWfLMnmZBs8qjYn\n3ndihSjR3xkbDcvh+9aPLa3cn/gOBIPbzEczVfd6/EiYfkjhSr3/gv4LH3T3\nqF9Wv6INdHU3Oew7Xk9xoLaw4XNBBlDl6y5YoleUPqXE5JYxKS8hPQfXFYVP\ngwF9qSFwX0Zf77o55SQigyJK3rYfTM04hJaQY0jPLQwRK6JF6//Wlu+fPT9M\np6tbECwLZSRI1lP0WTkg69GM6Wkyf0i5TARLm8oVdU39xsVUmu0+8afTrxKE\nC5n7Rf4mRoWeC696XkDvNZmOc3zfsU+8enxyvUAO0aGpViwpPSMEvEBijOwp\nv1k/TV6kFVsNIUTmGalR6Fl4R2QOGWd09z0QjtCljg70gKIlAR+3Vs/gBWUy\n6kpxRlS96O5LX8H/tLdXYSZEsw0Pov/Ph6zj4JEz+pIIYH9RIql8yrW+nWiO\nZ9MX+IGsVHGEhvGRbvPf1ZIGQ78la1reuj5Ndk9GXA9NN23+lIH6ekz3ruFj\nQsjZ8dvPq73wBfrJQ94xEZYu+ksTo4gJS/0Qe1dx+smKv++QnJSfJIO3ngWG\nnNyuK9HOyTs1NP90D5NMETupWE3sk200PPMxuVtZVxVgGxhB5W5UpzhC42eW\nG8k2\r\n=7qm5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaxPTTz6gCcwkHougGrF5kmVDD9PuVvAmJtMSyPnAUMgIgTKXb5RTGV9FVYYRyks4DXRzoGORyPK/CPr6SqFbMIC8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b6d92934.0_1615413640230_0.8747386929869785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.99a55b9e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1qITJHafbpR4DMkcCcsYKU9g7Qg2Oq4V/Q10ZAvS39nPmi+A008BXZO9BwcZuzTbKhoCg7m7W2vGHjJKAhlPgA==","shasum":"f976f43c34efaff1c59b17c4eeba5342b094e33a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.99a55b9e.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU1wCRA9TVsSAnZWagAAkq4QAIXODbDBhZ2KStxIxZra\nV1tZekuBzMAfxNr9p9vU1SYvE1rAYADpvS6VWKxVzuBmo7e9clXqqgkCllJq\nUpq48A52xth8XtRo7sSrwOdDCpPw4p4SNcncuUxetqHOrvFJQCziIDTr0fF6\n6aUVvNym6Vqf004fdW+2gxC3nlRQ8LSU0Fgpxnxs57GupmUn4fKHy7qdeikI\nkqG9s0PQxfGhEZNrhZZVbNZZrKHEJwF+TU/1w+SHjmQXYZBZnxuyf8PaAaFe\nhxaKSuAFB0x1LmUYXLUagvSUnN6Azq6fgOBJOj+Ubm2/d0IRfDmmBdCRMhVT\nBCRfb4jJ8ASha0CR717Y9UtUl39VxUzVxx58me03xM6DASULtVLd7LbUZw1+\nKx4RCowDj99REt6pGDYB1+qNRsaN4nXpCWZJuIAuGunAY3d1GBdjAmBtlqLx\nb5ImvTDptTtnBNZKusolYL/D2FqC9xe8muBXqytBNwKv+xvaDCW9lV3dPds9\nN9b6pUqGAKYxvFuQZbpIu4thU50LjGNA1PzFIpQH42og48GNLiB6REQ1gBKW\nD6QFEN8/Zzaeo4Ir6qqWkxWz6z5PXFcHwKua2e0hWEF+wfW8KZkQLjzmrqBG\ntgg4pc9Pu1L42Y3hycZJAEWwQ23+K5Fk6+6Q73BXq7iCV9spGrlq1zabCfjf\nlsdG\r\n=x/zI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgg5yWbMXBb6ZyF+MtqTii00B3o6RZ9/DcoQtZWhq/5AiEA75TvS+3KhqUZeX8KO+SrQOh+L2LjvsOT0oPFByj5n0o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.99a55b9e.0_1615416687693_0.32004199025514013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.bb14efb7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dlqwN4VxInjeJJJ3BKBzHasDkeyfFENXNirFw/hVa/VT3wJwoBq+n46uvX6goj89aY7FQ9VslSsNsCqX7gGE0Q==","shasum":"c41bd074ea0b0d0b41254c260ba4b3eb33594393","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.bb14efb7.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgdCRA9TVsSAnZWagAA7acP/imMOwP/7HlOrtbeK2on\nBBrsbDef0ehhLH0NM3Z7MGt4ckOqBRKOQ0lMT/XdNEzHwUx83MFbzRNJ+xzR\nJ/hqju4hGRbf3u9lr6iibakuayRqLb/J8rqdSDQKTL2SDa1sC/TgJ7Q0jtnk\nPpd5oVOq913eH9j4D/+DyoLGSeubEyRtHFlhXDVwDoa3H08J8BIJQobOCsqt\nCjYRt9a1y+Kp+B0nqixPO81udUnmUcRIEwlxt8vP9YWCi1/nfuLK8alzb+ai\nTlXpEb7JbX8W66cRS5X8oB/j6UdDVLGTkTkhO/2CdzcxlPgHzYPaGhnDjQ6e\niKwnKDl5GzEGZvxkJO/MDJDP7aSQLAy5AOexHpX/zLyMOYWcYWCrYdSThcuP\nxfFv2gtoasUCX4YgAXdjevlT5nP+3xSJytxGgSb1/cKl1iJBTivkdxFG/wTY\n18JMUbEANdcwTfIxTUMiOWX/nYylVsf0Kk/zSBoMzDqldUqNWPVhbDOK+1Xw\ncBOZRphWisMSE7ij+PNFjBt6Y/48cvmL3bNyyvDMOGs98575gMIh99ikiaB+\n+rUtknbxmDAGHiMaSzkuwzCuq37fTmueHDon6zifnoeytVXQgOa8SAYP+2Ay\nDhUGoV9sL7UiFz7rlcCB0M3RYnIemPodnEvPbxdVAf8x7j341NpSLpQb5df4\nHU07\r\n=hdz/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJsMkLtC2oL5KDpDy4HkX1IuarFMQ9m+hcxFEE6WOapgIhAOCR+wrWXYqNIlGZTOI4t5nPBYwrce7XOEuRw5UK7e6O"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.bb14efb7.0_1615419420601_0.5963026831647649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-juokaX6pfG5KX76S/9ig5Tx2fA6Rawgbamwip073WSEb42rVeUgiEHUase5GIkkaS4FfbOFwKhRSjnD8sQCV+Q==","shasum":"a4230d1576c19b6509d11374fe016fe92e82e724","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWLlCRA9TVsSAnZWagAAYlEQAIIRs4JDWRSqSZt4rMG+\nDBagQBCm/xEdgOZC7oAUfyFw2wwJjByYQ6HOicEjhIUDgifbWytMBCPOdjRL\neyZApAo7npqrJ0kkdpzcQYSrnT4AsAtx+q2YTBdVrrJcBeWb47B2DJZ+vsGN\nZIDhHFgIrfDNPFYwGGy8LZZIaYjUlnbltClSE80hWXH3bZIlq7LDTITMO8Fq\n4oH60KUhQS6vOfzQQCOyOOuCRQT0SGn+hNfXvRP2g1oNqbS6dmqvDpK/OyHc\nAFtdett26RuaO4/kfUw56P+f8gBkCrSDP+IPmq6NS8IzwXYayl6oTybNdmLB\n0sr+DMSZga1nd5ri50cWJyDEvcjRlsqSPfIae8g116XnArfu4MPvyhU3Z+Dz\nKjxdDZ1A322NPbkVJ/KF1fZL60e3J5/302igkq6ykIqRwI3Ndxf8/YKTSvTx\nsr9oQYVrewBT8KZoWgP3x7G3HSIlWtLGGrSlxfIojQDwNzae/N9+Fw9SExxp\nvKpPEXwZhrjwsvDIcNO5+sWlGKEx3czCNvRIOSJ7W2RN31vvY8+dyMQv0edx\nVgr1iNLSrYzdJA/OwHtKRcUOUHLJPSut+JdyYwUYJ2ULWZ6EbCrXj8Tpse0x\nTgNLzFsk2eua7JftF4h7nnV/IDxUlWJN2ZkXH0qAnJcOnRb3yr+J94q4AISm\ntWE1\r\n=ITLr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBNNHk5uvCIZ52GiXoDHnORCRRN386aVB+LzzVIelL3QIhAOToZdK9T+wEIwzdkj4HhyktvX06NnUkRUJFxhvxpBwy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.9ecf3bdd.0_1615422181218_0.7963182002079379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yNonH4RerRuC/Flik2Scdw56mSess8GV/EKmTQSSESQGrIPaH8m4z7MM6yxHTJUqp1uaYx6/BFTqkm2ldGHkYg==","shasum":"ae50ef8995f01f4b25e91051e556e84146c488a9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.7c0e02fd.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXZyCRA9TVsSAnZWagAAyKwP/iMCQsXJTzrYB3d1ErnT\nTTTzxtJo+mGvd3iwZqTGq5UbuSHfDxj20IWbDvj5HT96N7RoQcCRkcE0bzuy\nDvOCCzHGBKrENo3QgWLRuwm/IbcsuCq5PQ+rbOyax7DJwI/e6bweX07wVUT0\nlDtRkhPr/tseVdg9ZpeL+ppcYysLr3BNmL623iTgILDt0oDqFtXHPQ2z+NHV\nRuc7Pc5DOHk3dQGu02kYffqilWq0MnwPKsTXciFLFlYCiaSg7Re2Sekpb+oQ\nOAxx/UXfsF1IpevezMDnJznm2L2Z0q3YAuulojE/5TDYrz5XMcJX8y+hoKA7\nixj2DC8m6cyWJ7wZgEjXcvi37lsp22HQwhqOroYra96wwrt30WV+KcUPxXTZ\nLcwq0Z2kyLV03+pBfSbrXpChTE4I7+kfql+x9+7bxXL+T8N56tQAUVx1zsQs\n1tYk2unbkR4qTNFL3QjEHYzNLUai6SYQrsW7PINH/hokYedOlwP7K0zOfwae\n2qRtXLqB20JQIvbJIObJKLIrNoCEADWKdQS2eo0M5DHVFKoAP+4OgzOKLQKk\n6in1A4l8KHsBxUJqcKQqvw31SWy2k4Gcfi6c8RpO9PesY35DTZTcEI1h+u5w\nH55vCVpCT8k0rK4ZMSkgxKCUb98QMpYDZU7QHgSgEPUi8RiSmLMkD9z6Xzza\nCCBF\r\n=viNP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDszVGkHPps7whz3BqtGYMMYoilMgmmM0LVmtnW9RHzAiEAnqD2tgUCiLTO500w1+TNED3t7K6+YSse5kfRFXuQAA4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.7c0e02fd.0_1615427186288_0.2985034110677911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GKmm7Q8aQYdRfb3gqw5w6W+K6RUHSo8v1HS8xcSNzTxcUSc6XEBe7O0YLpJpPgXJEeGP10aLGQBiFiwD3ikiYw==","shasum":"1af3c9c267160fdc29187fd06567203d6e4bc2ae","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.2d6d59cc.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmFyCRA9TVsSAnZWagAA2MsP/id19cilvcWpNpH8uvTf\nFPSeAiPBHm/bRoOukmlyX56oJctX+nw0VrgT13K/l0YADX64KZU5U9NsfllU\nmeHfvqPMpLUS3nXx9YeuG3hp80kU2hXzi65oUCTd1ka971DhbagoDghlCZWb\n1M2O3J7mvoJciMhWzQ8zWiWlYzsm8f4uwrLh047K8ZdB0IIqYzgon3NKn+Yl\nCPXmoXllsdEmI6071QyJPhCn9skZN+QPn+85gD0Cd4JdWpkjf/y1DcepshQ2\nPaBhjngZhxUUBUFpTavEZDiXCzU0CjNoXh+C7EjhQCZWqzIQqmo4o4jbuhSf\nxVTjDsq7hJItjbWg7BBFOSpBgEigEsQcq3YBmhh3A0oTKUs1UkCSVUbP6HO0\nFsk5cIMk8V6rYJ0MhrU+SJLhRQCV8ZZmOxRVQoePI8O+cWiE4NTMVs2K0uv5\n5unn6ZMeRt15a8y1POeFyamh2ipv3v+nT52zSba8pqT5hkWbil2JvTJ2eHt2\nxjvGf98vX0yN5dMXl4HyN3ninkwi2BsS/3w4gdK5OZ6rf0um15OilpObZQ1O\n+/LEWKOiwF+iXZpmDYAliiBkL5HRnh2cZ+q2Zt9knwboJUznO/Lm3/I6DOae\npBX10CGxOA9+px7zhcjnhp+n4L++oHtj9aQBegj0MMgz0cIpu+FC9HTrM+c4\njUlI\r\n=Udz8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5fu2mTJiLYEv0lSLxBrKxxNYrJUJj/AExmpCu5SOvfAiBHRpeIKXG8gq3ImiT/WLAgJ0VulEHxLtO3BN2X3XSilg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.2d6d59cc.0_1615487346240_0.24344481703432463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0138863c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nJGMOtpC2KDne0YkuOPg4UBsc9EskJ/TTmPqeLtxX+tbHrIi0JQYU1XB86FfXv2L6Uzn9AKQ9oApY6Xo8ipQBA==","shasum":"3dceefaa259826414dad35ee651878f3c9d6fbb5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0138863c.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmMwCRA9TVsSAnZWagAAlVkP/juv9Bc9LaB/qGq5+xN3\ny0RB/Y6ZcLMRUU2fxOCxTyZTJl/VLFQROT2XGev3FE4dPGRiWVdRkKhf1Jlt\nt0zcYiVa7VroXMgio3BX0VCnl8dmARwQfOTBsziN/DLTWeOPp8lTdDRo29M/\ns1WnU9fXr7ZK+ZgJgwMLZrply8EmVJ/lZfhJk/194hxCH0xcP1ykM0rrofiE\nQ+Euh7qQ0f7C7GYrV1SRS5cOFrtcH+r3G4/hv+vYunFD//9JioXmYaJTsOws\npH2CfaOJzkjARP3/iJuG+1SuD4YRA0PCUThC9WUb3Jj6vUCW7rz97La+fOzH\nLOBAu0BhVXpTGSEIhl7ToRQ0YAdF3jBwY1Ga/aMKJnXxpbjRsROnKqR3uyjv\neCHjP8RKdb1cUGY2cbUZNUmNOsZCue09AuEgWLjtSxzYR1bL3xiIjEOP4n10\nl/h5+bkoqr0G0Uz/D973EKAPu+Z3wWmp5xQLzJfn+1JcBNdPIlTBfzcBu3Lj\nlWg6MNBKtyt9fsRQXeiWoTQurKXqGz6uvMj2mlCShcoduMO0GERs+icv6fMG\nLUV0KEgiW2Mec96VqgRKhItIwVgFcJwSsOLtJx12mtA/Fmqa29D8oslxSsv5\n4YjW5nea//aJdYp3OEczh80fB8zhUOWDViF81t/uDbJKRqAD5HKlQ+9gmZfp\nvLpt\r\n=wFUA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7Knvwnhi8d2bxLKhIHzOfBvuztUtwJHf0s/pZQL4K2QIgF9vdRa4ImZX/Y0lvD0lCDDb6ggbI8ElPw8nanT6KIfo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0138863c.0_1615487791806_0.727937833810703"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.926f5bad.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/snackbar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kMmSJ8Alb8YppfFutiZ91P6wiV+o7gmD/X0VJBXUuS0/8vyR7t8SH/7ZJhDYa9ZieLtlfGHC6wcsCc2464oBgQ==","shasum":"f383fa82a9509d18618e6dd5628d8f081d916b39","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.926f5bad.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsYCRA9TVsSAnZWagAAdoEP/0qdUcqzTM5FFmbRmQUx\nWSryFVfvmSwEX88PijDHcMNzO0K3cPfTnA/eYN6Z04PXj03hn5os1bYHn66X\nCtBcg59QPDVCXSVqnGb7WF3JTis589CJHV1UYRxu3d7pc6YmztrIWGakjeqh\nPU+Qi10NLz/kDTiKuVKsdmAqU1r0GhSH7XW+MmBiUAlV+8XS2Wg2xO5i4W7/\nv6bRl6PezTsIIm106J12ZfZUspI5O9u21YiQMWw1fnmRNQBt9Gaz1Z/2CV7A\nhneClH2A28f6xHA+1wSfIb5UPpJFzwywzEKkTVIzlbzEq+YlJZnNoxdrFtsh\n6uJ4r5ivtubIwSBGHy7d+QZLJphrH1ou9RB/7wTw+Ticbta64EERKo7OvikN\nHgat9HBCITKQPF+1s139NRLvb3O9yQ/CuoApW1+vK8ohMlYIvMW3ibKqEOUl\neE6WnEeIbFb13hQVX8T0QW96N3Ch0Ekc0zlL1A9LrEgqRWCbCr0EVr38cbPP\n9Bfc4YqZG1w97dFQzXuB+MO2JmzHm7fKpWNqmkroCEi/IOBAAaSRIO2hd5pd\nVzTf07kPZ58tbfMld1KqbPO6R6CbvT6iGGhIqxmTjv1dawESjUld8szs/7vc\nCj4b9hwSVEIJNohdtD/A6IGR23eTkimbVduDMTmhyeRQGqRnughQ0uwGCi06\nd/87\r\n=RxBI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9jIo+GzD0dGVnoo9wfv30T4ozq2WuqEaxbAT2lLf7sgIhAKkBz0IU+4FOCZGPQouuAZtB7x2gcXtBOzo7lSwa11gC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.926f5bad.0_1615493912031_0.39351261159387385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.520290a9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/snackbar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FvdJfqDVhiPOJ7ZCvhA2d8OXe/BJnxoRbMxroEViDkuRE8vjf3GspUA4n3hi2HPo0ro/FxUARHjOltWxYt+pOA==","shasum":"fe646a97db43404579aea2800dd6512fc44298c5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.520290a9.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSplgCRA9TVsSAnZWagAAZ+MP/jj/izTgdUcvbEiuEY3+\nTVTCP8L9hza4PdWz0R32GPjBIv1e1qjtXrCX5HcfMyi3/qdexj5GSxYyKjYF\nfBOPKhftScf6O+qh/fOMbZyfpgEvCOyUI75GNhsPw3oOoGYhmN2zmZtjglNj\nzoEaIyFMJXaWyCmEGjeh6LBSDdL+jmvPjVB7hTddAHkojg6HxpsgDOxu/y85\n9dK1qu0yx4rgSqY+XwB4GQ+ttlaG8pRCElTBWeag02RhZwW9w5YyGkSrweOm\nBDsCFElpuYxPMI8XBTaYm5wBvgzaDMnqtDNgfxDJDHzdTsV0hwuC8bd/1fvJ\nq+rJQGoJyhZEm8e2+29w6SHg4HQHXde7EKwDl94WJ3Ey3fkyhOFwKcLxk513\nRJrGR/HIfbPLscxacbowfwX8NG03vR2Ni1mDxukdOrL1pIM/aNqvUbFgKC3B\n/ZhEeCHtej3T+19V5fyUrVe9J5vheaJ/GhHIv+OL4/LOBVSqGuxv91wVIuZ9\nUDYYnDhZerMxy/22E08krPSGZyGhXyDkRYHsKQzmMmVeeXHSiwRoayO53ruf\n8GDACrsF1bO3ZxTRQiIiTH6P2ziLl8Du7fwTdXYMGMzdwDs8s42MCSfk7RGj\nTw2X/LFEnAAu9HkkQSaT6eFW03dZc+PZAo2ErtOPTCTx9n+GJiztIKr5+tJW\nqYvh\r\n=7DYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrIVSlYQ1Go/nIesZDSIk+UVw9NyVYRxvbg8uFkY4ylgIgHvN1pkXVzIXRnWqfYfEpQVtkOL7cEepgpg/T+XAjvck="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.520290a9.0_1615501664159_0.16821782182390654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.9ec431d1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/snackbar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-P5EUbj1k9I7a26JBza5Zi/kOVkqQHmqMP899xCLCxTpwe/KBu9+oGgSdK0Czx/Xi39O89ENtuC1p+sHcKvD/Eg==","shasum":"499b53fd370e2c3b2d0e9a0a06fe03ce980adb8f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.9ec431d1.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSppkCRA9TVsSAnZWagAACg4P/j5T+zylKf815NPseQUc\n3UIK19S7kNazMLGoCBxbjbxulipFEPkZt3EFf4cZm0w2IsW+DMkJq6IkO9p+\nvMtdjiMFPgUwgzFS98zP4PBLkGC5Suqi2fuNscUsqxYvNhBEzUMpMei8XIMW\nUNgqyBCvQN0lx2lC4CRvL2RGiYLTvQM7M+QYvXbu5xCBDbNdGByHTzNctkNz\nVtnQnG3JgyVbDIWDBZ0QyfUcwiwzJ9qcFsjC6u7BXIf+6H72euqxK1EnZMmb\nheeVT1atr/9Jcl98t5BI8JPmoOAkFea8PZ+QQjhNpDOlzxFyDJPqyjoYHIdp\neWSSkp8hc0hAaBGMGO2Q3/m0n3T4PQ/bKUCY4Mj0UdW3X5do6H8Gav0XGekS\nGRfScIQ7tGPEs5+kobXsbkCJs2VtZvxps26ytY2j0MDCKiCYf9+7ryLruWCh\nBEMQnZXakT+raJS7gzX+8E5hfiyrtygHDan6RG9DCzlkeeAqt2AoqjR5oNq/\naSwinXrfaZJHlhxGAKtkz5ofhdRTdxQlWBMjtXZaE4URTDsdTygSDBaXFhhC\nr6O9kbsedGjcnhgdZ2BGYL4X0sJEhmdD0Uo4/FvpjakVQMX5EMPKt0ND3EBc\nCXMRzcJOz/IwY/4auYJqZQGyiE7+iwD5pJso6nWO8LsTFfrNMWvUeaiGYmA5\nZ+4D\r\n=C2Vy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/mo5aYLltEhBhJj1y8gh5MFTAh3nNT7fKQRNlfLtFMAIhAJoOAMaFPVPE1aytfMFrf+p/o2PT+iJntgN0QW54ohcq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.9ec431d1.0_1615501924195_0.3838064480996488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.4246c082.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/snackbar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rbXgS8XWBQEqIu5GrZTsWlNsdhVlc+v1ULyneS8geLkuUSwEaNtQIW1fiNM+fkvKWyACvph5kquNmeSjDl1EMg==","shasum":"1607b96b6a7eaf28a6d136065763ae4219f71d00","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.4246c082.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwLCRA9TVsSAnZWagAA8eEP/1t6/l503/S7IRWlU3DA\nCVqxpTkQRU/JhAyhyLHnKJMqYHz3NhiOObUquriUCmCzlk4j0+bAFA0Zvs5i\n7opgTjdP0TXquLSTEEBTX9ABeaxtIPc+EWFWBiPdHzGr8pfVvc3Hc/9KC0P0\nfcM+MPEpEzWCArgV2uTiw+uq3DtIlTPgTvq4If/ZtwRMlQynk6WIebVrrXyX\nBotCzUZBfcaUfMVXWEyx+ar6Q6UMY1M62r5KD1gvgC1qwLen7HDFUQbrkVbB\nfGu/Fzky9aUIPGXnpOKqkFE+sYOM+ZyuFRenXlrXhorkCv/JEnAzsUAdpoVZ\n1dBomHgd4ufdEcZvPR/8VAE55726qyRkffYfs7Y6BF/yocaXng46VFtv0HjQ\ngC3WYItnLkou1POOCBQSoDmPXV9jLWbq6lnYnfftvy6XzWQI50aFRvT7WbAt\nWatCt2AC8BeFlFzLl38a4tctERmlN8T2mFdX/bC38+6zbmZXEo5knD43ASVa\nkMFTONcpfegGU6lRqFO7SI2u05DozQ7xTokfYE+WFKxmyWfB12WNcgvtecvS\noES5aXRLRYM6hZuKh3CZOhlML5UVv34ZgGZ2Sx6jPHUIH9TAWAyH5oO+/gLT\n3HYdtGZWM/F+L+Yek5/DtLxkMK/+w8Jpn3CzxHUxC0s0ie7Ck8EXWKZ/XtQ2\nwsI0\r\n=RxB9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxM2cUnaO6367rJCUWJQc6w5KESpsAIY9DFgYnQt02fAiEA6da/jHNAD3eLi9uV31T8F+wzw4xn8hJ7EnaU1desCqk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.4246c082.0_1615502347400_0.46532844269452833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.2d736253.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/snackbar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.1e0653477.0","@material/rtl":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Tkn8CJfvmzVPUBrKjfYJiTtVHYxq9EpJZga2SuET3NCkHaOv5EDfPsm5KSvPy3MMCCmSLL06RCXddhhQdJBxZQ==","shasum":"f823b6e37e5d8c61ca88f4bec903d5cec19c042d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.2d736253.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+E3CRA9TVsSAnZWagAAN78P/0R0MjmiWiZDn+IY3bPq\n1Kfz/jA7//HJ6fZPZQWZ46BtW9rewjou9fItMAw3G51IOcUwKMhQ86sm2oFg\nc3DwNjZA5Pg17dMRgwY8+yttaTDGy+GRBrdi2kyE7ISSnoZD+MUujmJ4Xyz7\nVbDW/qwHXr5SEEI25/tjzAH9lZNlEDtCt9ESFVzLiI08H1SQi8eywKTVP9YY\nFgCkHtHHRGzSd90vM3TuMCinx65xes8RXBOT/LZs1UG2l3HkVYeCk9Y9bvDV\n0fLv2v2UWvqx8gQUGOUcndoYhzW4F4bBJENhAyF9uL3wg6KZAsl+KV38Vhmw\nFsZP/uzvtULyBbm3ObiaStknQSxOxwmx2PgEL6a+OgssIR0NpQuwzICmeLsv\nlZIc12kUbOJG88+ePPd6Q7U+mT6rjlNehGAqIYD6lhxOUwabXmgAJ6PZ6L+T\n1c62raHWtt0xTXMzRipkchvwzSzsqv40cBh17d8F5PZYsO3lmyIBZUq3Qh4D\nUQrabGsxAa0+aQa5n5t6PYGMHBU5uJIeBG7Gnolgi4QkrzaZLoCK9cejhF5u\naAZbmjJfNVzy67KDXybYqs6LU0xkQS2u+YZdJW+oz+Lx2GXgU9CaFuvdHmBe\n+3u5zqQH2IWNX/LovBtDgcKIOM4MjfYJ0FSXXjg/gXlKssYLVPSr4Y5sxiz3\n/FYM\r\n=36fS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFur66RyUMr4SIkQvMA3Uypp3alsfQidmY9b+yCSrSmAiAMkpc+Syf1O5LMnqCVVw1R7UefqHoprOjgBRpGxb8bOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.2d736253.0_1615847734985_0.802343912847231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.7033124d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/snackbar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.73a227194.0","@material/rtl":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PAW9Uwmg53x8qwUe0KTt0maK7+GtSyP3ieucyHra4hMGiNlJRU3kyL2/jBb5sgYmnRvcCgAZ4POAv3G8pfcGNw==","shasum":"7dc0760aab5d6f8c467a5c25cd38a7f077cd3063","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.7033124d.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrfCRA9TVsSAnZWagAAy0wQAIjqomipXWpIwfseaAzp\nRhZWatC0J0l4CRhdwcELPTn2f1eL25zf0ZLNKP4ssU0/AjvxapZJc20XzBKR\nWd/9lL3fmlSYMIp/p5/VUSPuAKbkHGbxVWmIJikVp9m5g0LrVvIZIEJYbEcQ\n9jdnNoVy4fsPeJ8THr1cJjd9TJKl2PBef4dL+DZN8onUQNiJ7SFArHUfAuLk\nzCoBxPXsfZ1ELBnwIrqotT2nN856voQDOa/FG9PCl+lfga2ESvTPqFWG5Z3G\nopl4NslkhcodFxr4NHb2o5bm63AQv+Doe1q38yfh0XxH6qHQ0YyCzpvYOEmL\nOpaTK/bIUniGLYB44dRiFfGcQSpgwFscVw+SKYxkwDLt4y5oOAAo0jkCvc1v\n/zbH6jt3pNGONOzJvkJyFv8egOFDt9fTKwdAFJ9qROoYxlzf4xq7cnwr9OcE\nR21RXhfv5DXdh2W/YJ1naNgNwrzj1bckhZUuUTHmEy8cz+H9RtTjT/gjQ2ye\nEV6oJK8DrpVwe+V6/4quSDZmCvf6wfcFlBDgVt5zOFjRYjhS/ZheCI9ur2D+\n74xGpybA8IeJL2zL0RlQG7xVIwJy4xIk8nyEEBV8sdzDV+V+Ak8rbv21Fhfu\nK9SthiDGWSk5kitd4jLRttKFaG2tsP4eM9HSdmwtCjAcryGrXlUjlrNUhdyM\nofV/\r\n=9WxU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeteuKNxko9P96ewYVmMNzj59eewjE1DUAmARugAcC4AiA8ZeXDR37uPCKj+yJomDM2GoxCKTdssQoi6b6cwYTRiw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.7033124d.0_1615919839316_0.15455146403278386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.6c0ee901.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/snackbar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.73a227194.0","@material/rtl":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FEO+JUtIBn7dyWylbzZ2O/3naN5Vh9B8JHzdNHzRhuR0HsvwxEcXqBUxUJWE6Rb6FW8RS/uiBYUmIc3mvD+sDA==","shasum":"fa9db5b3838315ca4f822d688f0a53bcfd9ea05c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.6c0ee901.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTN1CRA9TVsSAnZWagAAEwAP/Aso5tMbwQs5AOivdSAN\ngRGzSkp5McyT+DZtvTYRONPJzJNrNhxWvwqKKhvDhe8U5/vXskMf3DvR3j8I\n2bMWbF+9GwgxRFSjXZ8ZHdXHel8pu2+h9hUuoedSgMQQWc2UpfAqzRpbYJ7C\n1XfPi4r6GbO1JTw6WUAjUmkyGmKlNQg9RYfW1MnIo/MeEiMrka72U54qemqh\nY8kP4UR2ai4MNFqwwlac2+ToL96ClaGkbP6sisLXZIpD7grf9Uc6X5Ej3BEc\nPCOTJ5IeyfU+4d2EkMDEpDBgDnSReeKVsanejIcxTwy8h6wi2U2wd09mVBsR\nr/BYiN9tVZrR//QI9FVx/UWUon1NuZYBZqhdPCrCqx0Jew7lJC8gkQznJaal\nw1WeP4EPdMsNc3dkyhBwtmfh4D+WbCmEVP9gJYOqOyElnX/J/yvHMHOTeqpm\n7zxVWtafH2s7r6YREOAQMznqiyv/A90wLdzigpiEfChYAtjKHNgYma9kwFFP\nHy6FioMIsQzjkZn1jHMW+ibL6xz64JqMDT057eYsBY9TxHbryLQ/wjRWQ0YM\ngLdeZ0ZR//2yFWTphjs+Ah4KhaGH70UMfF+RVLgLZSpXV2LCawdviJk8GWSp\nl41FSQQ/iiAUYlP0gDqv4PSYT6E5qb1kjGdXTsf9gpQi+lFmynSyAZpHnA2Y\nU+M0\r\n=G0GM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE899s2fL1gMuE/YBU5QLatPleoLdCQgJZzvnSifvAIEAiEAzJF0HR9wmv56M25EVGN77vnIaWKR5kShBoz9uRnsgrQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.6c0ee901.0_1615934324928_0.40200510962304903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.7f0d605e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/snackbar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6adHW/mM0XUkbVCKKl/DVIZmri46UV5Oe5DGc0cOdgJjSw/tD3Opus3j/382DVMlXiGo8mg8c0xIBozV+MXCLw==","shasum":"664a5a711818aae9d6dd7dfe8677d9eb4f1bb8d9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.7f0d605e.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkSkCRA9TVsSAnZWagAA8acQAJ61lWT9ojes4FCHoAxJ\n0f41q2+FYNTRXmeqQZPryVyGNctwm5/E/+XWAYvg+81Oh/AajBvYeYCKDK0Q\nw/1vyqAAS9ounWt0LH78spfCrZR+CMNoizg8QZS95t5F08WfyRWoz09Ib8Wt\ngUttJScy4pbY+xwRYTZV7ZOmI9O3yT/Gk/mDSv6D20XismqKDlDTGuHaEaXc\nmZhwI+JDV2mWDZYLAOfzsxHaumrL5ltcj9tunQAWwBjcwGfOoou1nuJv9JAy\nUb2ulcLbIy0G76erca15m6zgmyDfW475S/cZxTasC+KPj6S7q2emS2NL1UIt\nhcYe+XT+bHse7aBIWbLM/VH0oQDK+e98U9fnHetifMYE5Idr6NIlkkgcIhCz\ndpjV7tU4BimhrRtrdEpCGZ2F8e1qyvdNcE+qzmTdF+cjlF5+Qvm8Assxe9pd\nqbrJ8j12Ch6ZlHZQ8qQANXcuEPITbWBN5At7KSw9i/JJkhfo3flDQexUqkwm\nsL99tskbSGdWPmvLH/WEAWm9SNkgqk+tfkbHHJxy5+qlt1HXQYE3q4PvNUaz\nrYTvLk++svwhYg7x6cu6CZxPCQrVenqUtGbTgeJtqWeRe0vbrsKMDK99Mrho\n2aMrMSAz8YMVX1xxR7ZC7EW+BrVmkSTtWAL7DTbHjEZEcMWu5uYmtUw1+gmn\nhqqA\r\n=NcwN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDAiFViAUfPLbCttwh5vLfZHIaCF40jJjkU0TB87cglwIhAKZqu48NQHOtP5q+AVwhvw1oQEMqsQLlmCnv6TMpklZB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.7f0d605e.0_1616004260200_0.09254420705889999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.572107b5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/snackbar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-q/t270S9GlGTjNz/RDbrzMT5D33JKGZVM/ondZxZOMGMg+fFbjgO4bzUyQ57pbS1i3nIXPfRgtZj0hmFR9pdfQ==","shasum":"f19bb9c244130d34a0d3fbf051369fc138715e6a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.572107b5.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gbCRA9TVsSAnZWagAAtvUQAKJDc9EgIHqtkhg+f3c0\nVqfkMTtlmC5S/naJ+irAshd4knjsoYq281VwZgsKvCaPRoytNtMtAwH7JByJ\nyXZvEIfSnTyfXuMH1tTpzwIOD5G1+q/R499DX1MIjEXGNZikUbD/vVVB5+kI\nP+boUS7D4P+fypKnv6ZV/LZfgVqsgBOB2TvfOmkQ97u9fn/oLt+nG37e+uAe\n6D3ZnbPUQTW/qcc3BkEMyEgawN+VEHrcWLeRHC3coDKZrLKOaxNY7OBKte5q\n7l2dNp24thRnhnAoQNRiIMqTbfNUdYlXinIGqUmyNvSjiyY1G7B0TvE5dpPF\nR2zgZBLTw8vScGpxVrqIQt0cVaq9d2ESJN5oJcVtAEgjh7d3njfJRntv1VpM\nsidAr+zsrY8t1s3O/aU5LGcSW/NtG7/raOnnrtmVRkj6l0duNCCDpWqE3RUw\n75PkMIvi6ZJ84ga5U7/cGrvfpeXz/lypZcM/Mhgowl/Z+6xescVnn5SOU011\nhiuuVnhUXKF1PLLojZoPxE3ZszhZTWqU6M/7IKMVJmX+bQtR56DouFZwUOrP\nhD3M558Q9HJe52Slk8Zf+SNQylZoXVC8TvMJBemUWhumkdS0fdubSpIPwhvA\nPNAsti82TTPbNcRZ48FhHsn9jUVP1tlCuzkB3HrIy/qI77P+c6pr2076xbRY\nIRMR\r\n=Ey2k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyDyqLpxKp2XpMVqqca1oukPSy+uZ9zpd4TJwyyEg2MwIhAJibwsPJO1oxBxDapMwvO9HEaomi9JOmzxdpLoF0PTTJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.572107b5.0_1616111642929_0.2887958756412119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b7b220b1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/snackbar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UdHJYM7sO3prHIPjmQiDxbH99h6A0uR2TCN4CLtVM76i5rZYS/utgZ51QLsBvsEigPxXV3ni0eQsCrZgAMC7yg==","shasum":"351adb79d280996f80d64e561055a769ed383f13","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b7b220b1.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4jCRA9TVsSAnZWagAAjMwP/2afCVOsTMOxbefjSoUI\nN00nW2YxCgEh9vk91IxXTLCPODg3vr6pKu4axWT/Tyc7JKVGAcy+9xytjg+4\n40Oyrbg3LNTJTfrfYK1O1on8kfcFelKlFAlFpMU04n5m2IRRUK/0iupsQu4s\nBwcLHfN3/d34W6l9ZoGN9uSyc4tBJVqux9IbwHi1dOa6k9ve9SaEPbJrClmw\nrB9o8DSjL4XwfnE59iVb2Igfqv0tRGhIHnziOBx4cWprjgtN099chHxG6Y0K\ncXNAKy2bePe/ca/wJVn8lEh8CS1vTYBoH7+AJi9GbXyOCeni/ZSN3mB/e3GS\n9oFcirT+9Opt2hvfG3W9AuudE52osrAEJ04FL9yfs4CxwrO/BM5hcHY88nLS\nHIpM3oI8tWrV3GLfQuT1CbFPqRG4Qr3eY6VNHFsxkW2QUQRTGNSkJ9nRbwwb\neltOjGXQ2+0MNkYh5DrjQK5zqbd4ahAGGNpAnvTtceA7nkTuej9RSW5JUeKV\nS0sbuoFc5JtQqYj9z/7Lxy3Vu2zYrdlaYCxCz1oyVjfSpUBqhyXCUZlLQSPp\nC+P/G8W+NWNkpuct4Ea4ObcHOf64dWd+SnnZ6EQaUAFZIGhbg1v91Cjmxs9C\nc7URtAmuWToxXtxWkglMBlJVfBAdscndpvmOmD7WG6bSjBup5v5+9DVmsKyt\nkgIZ\r\n=4bQu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7KwmOF1+chAL/kb9lHmDk2D8Wu/ivpNWBL26WEpw7vAiA0GO9kV0037IjYL3aw3J6vdg4KpY7sJMjL6HITCohi/Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b7b220b1.0_1616113186721_0.32178999448007595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.233b2de7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/snackbar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8xtz0Zpql28aGHNHI7z75711PMZptvga4D+j91+GfMYi4hoLMZcO12NPfwW3OSi7KWErV3JS8UT0XT0O4s8P3Q==","shasum":"bcf3481a56017319df2d5c3e6fbeb318823d326b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.233b2de7.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2WCRA9TVsSAnZWagAAA9oP/1fVmwBIu3K5ds+E9wGf\n2CuiVUts6n5BHU9UYiWoBaIiNXyphpGFYLkRQOT4EEVkZXlA+uFJjaE9/xUK\nOLFRm6OCfDFtEeT63uwOEIP77bvQR4OYK7zTcn5Bx8r0OkNlcWhnFB28kmSf\nKTZtn7zcYpBOm53mGLG3J0iLL35FpEo59OGyaE5HXQf+emkaY13j2gfLWgfg\ng2WfepyJWCxZ4NdXTWcQUw3aWCmM8/eJnnsjeFsLBaYs6lblUO9JV+KJ/l4G\nG9jLReoHOD/Gbt6ncngECZLgAkQmn41rgB7fDB4OvWXh28IVcuN+IqN9/bc4\n0+Ah/qoPK1XAI24l4vS4hdKwhAR6Ghan1sh39lRB6IqKHnxl9KCIms56bGJQ\nCmcLj7/tJURM3HUEoNLPu51K2vh3rouXTcTu4gX0SoQbNsXRc3rSqNJxPH0V\n5b+hkuzsNGT7E5I2MHT2r4GaR8Ki6p81rTAUxa4MU6uBr74KSuSYPnIwc81S\njOTumauvYG0xE/JTYxrUeDsD+aF6r/ZPRcHEdX9h4A3OraoHRrDVFhkJ+z8t\njIqDWzZbUW4HobdKK2nK0fokPZi/cr44m0AUDV/j6ZGm4mo3zIS/W0jG2ZoZ\n6Z0ZImh1YoSG+p9tqesWUHo2i98IAVF/edNxv1weVpVhT5NB4LKoaSslDILP\nCT9C\r\n=xkbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClA0HdHvlsa5h2aEnGQr7dkXsvMwPyE1upLjMlW71n9QIgPgpLeZA7jAVLSCmwBw093KUfdxWXYHmti0UhINLZgHc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.233b2de7.0_1616178582165_0.33272224577682175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/snackbar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BwrxLNsziEC3p4uwK7TP5oRJWXUOUg6vUbuCCZxyKaKYIKOuntQbwETVYGBsmp0zDU+WdC3oTQPt37TqYB/xyg==","shasum":"c360d18cc96f8dba62ea9b96011babb4b9e1be86","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0c1a2d97.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRW9CRA9TVsSAnZWagAAaXMQAIFhnSDZ5dEOxuYQLD0Z\nKKnLdjvp6gl8OQyM1zayJp8NezK3ivy2/dB7+7yPfJsKBiEM5ntMyqKat97Y\neC/TCFTAo2Ftyg5Lqyhhlnu/rOls+1RUsxonllclYrIBqYaSttil9SPpZq5/\nT/U/KRJtwKqMe0i4D7VpKzuWEZjSf9TfMlvs3XBPfDDS5o4OawfiPbrbo5qA\n2dAONj6/wEhCzhVMcxAm0HjmWosd7mPdDIlG9hubs2fXYP7hK+cghlzvXnaE\njLwL+EpCeEpT6I6of/KQJkDfYnLr9GZAVhr8c0S2IQPAdYTUyNuY52eHMVPS\nF/tbs0tFeE2R/xH9RiJJnWS2SRRdgq9kWmDfg7SS2jQGy22ww+e7KCqz2fF9\nxEYPTkKdC3LcekWeBpJUY9JBM3QvKTwDMO/LkdKdpxcUOzOj9RA4b/+FBBfr\nQbtyDnD4qmyQ7u60ULSH9J/Zt/HHRy+M8EZzhgvdI1QuwxSjffy8QonAwK4b\nrZuRZW7qhkKeZj62bDoDFtyPJoGThCno61zLLfp/dCS0C7qFBNt3SBBvzYVF\nm9w0ls+Ifi7LIGLe37ouw1QxttG8rz9LDIaPNDEELWYljsL7KXk9s7hshyzY\n3HdJ1ZEYQtORyPCLSwKpSEVSvMkfgtxJVdWaQ8fc/K1pzhmGNrX3r7dv4u34\nEISK\r\n=xk7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbelrc8vSpwVASUJbk1Z+QBQhBkmCeTMr3qif2TMQQgAiBklY0X1p6b6Sjha/tV+1xihVRoFifqOaUKKmOJhZbv1g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0c1a2d97.0_1616188861064_0.8410065049187998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.57ca2e73.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/snackbar":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.5f0fc444a.0","@material/rtl":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xzqUoKoE6AiOOpOjwhDKZ+HA7RT98vg7p56TKIxGJQOrfYk4e1305X3ELQhnmre8kuqD/FieGMGaecwQ/bSY+g==","shasum":"7a9b6733ab0927ccdc3f7e51e657b6479c8db7fe","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.57ca2e73.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVShmCRA9TVsSAnZWagAAtUIP/ih9wmxIR1kqks6xA6tM\nF+qR5rYFXnS2hKNwExzg1yuAbfHAvMpAm0D0ZmT6bwCHacc1cFgGA0XGjQTk\nnuqKvjldkLjDZff2+B12mzx1Ls++ISQ/akt6Uqn4N0tOgo4/UGuURIzRq99B\npwCErUdoQBpPgoN5AviH+BixaTs+LVAOkPLdjCIeEDfQ782rdcPRfnt7kwoW\niLU4aRVnirpSk6AS42U8hjKE3VpQGGX2g94ah6wn2Ms4BcfvSWYf7zFd6tmE\nl5WL8I5AeV/LYmAydavfmuhwIXjwQqf2lv05yN6QamPGeBpQyBhE1XX8Dwv0\nN+t2A94dxRxuQ71ytVTzeeENAOjYB8fhSyg6FzaJ/2XaKhQhduJ8IZ9MROU7\nWE0SJTG1QBd5KdJzLjLqyYXIYYvcnt1a8he2k/u/YDnBcxnKb3+E897evLRr\nWU6W+rAbdL+IYvfFNFPE4NLsJNvJXLYhH2SiNRVcGzgDaOJlmaHPYWgGzrl6\n8LkwU+gg31g2px4dC3iu5VZUBljgajogaXMoKyg/TcpoYjHuugMmzaSEQiKf\nayOfluRImWMhW1C+gpHv+/1zYVn2vWedj5KPLng2NzBsX9TvRNInKBTPm2Ol\nAAxLDMRS83mzQjrwVzbWmkytzXtdWgbY8dC/h1RAZbqMVwsyOPMdn5KYAfkO\nHwz/\r\n=mJh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHE8Wrfe+CTagRAaMNmIxJnEJEzkg/jynii63COiY2osAiAJI4QszkJbWvzWWcp30wcOOF33tcTJ19DG1fHpjN6/Xg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.57ca2e73.0_1616193638245_0.41524581562025276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.5c058f4b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/snackbar":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.8943b991f.0","@material/rtl":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xwSprWbxgv2Y7PSwX6pzgEjibi2VQqOdHoQYWMSgLJyc1vIt0ELjbHlTkk+G9tl9+FhusMVMTYWo9FWzipKFRQ==","shasum":"3ac25637a64ed38507cf33e355313467992572ba","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.5c058f4b.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTgCRA9TVsSAnZWagAAl1gP/1CMxTHYD5Efx5Gqg5YB\nuoOWzjeprVdwDap+JgsoBM3vFReZSS5OSVsymSUnXm4Aajq5pyUv3ZRfqKKs\nKJaxM0CS10BOVOLQzaM9UyqGxmDgusa/rPWmahr/ZJZ3UpUwIyXsuow97eKg\nM4lsySyLMbwBF3XArLW4khtUXRVixrGNH91MGeYoX84nj+n34bk3MsToPZVE\ngIlfixIBgbQGq7dN8gFx8PCIrZuQPZLK7iYBt7aglXQ+ovEqeTDGfFfrUngv\nPFkXYniL9d/ovYC7uDbGHk8M8ozvEIFZHs2IcKeFlBDevUh5DDVKUh662l2o\n35pOpUTdlyUwtDeE3Ros9eTWkO+3X40NEF9dpEH/hMi12CEGK8zryOJvTZDK\ny2dU9Ri/hHroNYiKZQNDzXwrOJO9Pcqoo3dwG+rCWDz0NPs1AZRzNlKjoQhS\n1ab0WqqdbzTtG4tsDUDn1y0D/RXhP5C7tWPGW+Lpf0u3YTNkXabhKwWKbyzk\nBjo4MRTfCe0VDVV6+imLxea5kOalP+JTYtM1RV2fPCdraB307zLC0jmDwLEt\ngkZsUMD9wFbx4xLMjsLZVzp3YMAwSlKQvacPvuKt5/mp+gyOdYG7o5Lz76iF\n6PSfdj0AKWoDDj4oN7URA0wvkguN6GaayZv/xDJkQBkX96BdZdIo4ECNvE+R\nqNV3\r\n=7GSY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4kZP1Lr5ll64AbqPEJA/plaZYQo7KNJqbtteFOn6WOQIgCBzzrtHrkpigUjPCaYsRdKooLE9Xkh8mhiiUhOSrw6c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.5c058f4b.0_1616540896177_0.3219173185221966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/snackbar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gUIZHK4c1FAjZA7dlJUNnFxq+2F+QwzS/lCoIuAE8iooemwqh7z74Y+PScaizIfQEs1c8wDNrYWTTU2Z6T3xRw==","shasum":"33816435207a8d93ee9d73bbec1a98a670a23ba9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.e27ef7cd.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XcCRA9TVsSAnZWagAA77cP/jFSsDRXEb79keB3wIKL\nt0gOrNj9ZUbj1MZ21Ngasy+1OSK3Y5Tx/92frGRhpnLxsdOsdDnMMZosRdsE\nV+KuFTevqfct8y+K+tW1NmZ/SG/PlP73GFoZyKJmcKhU+apGgkdnwkT7SbBH\nd3Ds4uHdn4+CZ8wAKbjtGMMfgJejbrS+ojyTifid4VGI6xS+QNihv6kbHPVc\n0GPhNZAuA2am2rzYST0hKBnn/+A3OfpjNYRFtFlRIK8wgp1h7aRTAx+8ShYs\nKs5/F6QnDtEQ8dZpM8msrrqTu/4QTnVZeG02caBmlHii54IxDLgpEkywu2wI\nECChXUu3yPeHFI1RCfrxJXJrmrO3mvft2kuF+FzN6yfkXDFOUmB9RuvMpidQ\ncEisFjGFd++2EtROhqbnBtr3N5GfvlbiFmgiW/7coRoXPprNc1w/HyOoHGEJ\nVxIPW+XXIimqWBbdeTRrn7ryaab0B0jLZbz/zWiOq6ZW39jBQxXc1qwCGZ1i\nYJLfMr8FFcCq945jn8hZD8ldESx+hig/O2U5n9wmneX/KVS3oyIMUSxDXvPq\n+Y7DPuMQiHXdetfsWjkOht1aZqGAxi0BpPO5S4gGkAXJ9lgF/8vFjg7H3hHR\nMGLfKy485tw6CExq0g0NOSAQDGSXWCAUjPDMbTpZii+bq7l2oy2J4ciUu1w4\nNldX\r\n=f128\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSNBp7JB0gost9GKLyQdoym1OAxPHkAm3g0fdBtV+jYAiBqmAYugNn9X4uBPoUYMUjYgHf5dLfdLovMtj3UiKiJ/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-snackbar_0.21.0-canary.e27ef7cd.0_1617135067937_0.24022134380767968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.15c09e74.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/snackbar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IMrVPGApevREsKL3c0+PB+iZLUAqHks3MmcPMsC/ptdUVbJRGAovo1/vSlEw1qhvfTEcrBMETbL4JZIssIWyxQ==","shasum":"cb832969270f39442a43df178189759ad12c4e9e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.15c09e74.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKebCRA9TVsSAnZWagAA/L0P/j8mWrXaMaomr+ZNHwdg\nITft/AWU0rywYpA0V/n5gnlGSe3zbatJ1I47wwubcRJSK1Que0gl3310cXpk\nP7/hFQoc4TeYBDOW1yi5WEhW1QQzJ+cW8lJCrw2JMJ6i9rMm8X86VHOT6PNx\nebrTRtZBMsMue+mv3Lc3KwvZmE5ockv5bDW0GGQ+RRKM80rF8qz5xIVn4GNU\ntcc20UoOE7W5OChZxstR0IytCelm3CO3Txhvj51zZAF6T575yiiau4EmgcWw\nGV288lmUTfA15+3Q17/LaqzNszuxSOBq9AVCaaNYOmJd6zKhRMKpaK2fglba\nlsJPWu9B+NNrENeQ79Byzn5zkWbfeVtd9hlhyBXWpy1KZ2qm2XShmCG20ndq\nmhbxl4XU0sSQdMnP4fmq0Pq/ZtUN5yrt9hRTQJOD2MFkQhAAWUFjuGsu61Ft\nXD0YHE2bb2/JMC7SDToVV7dxv5h6qislYGIzRDzV8kmwx0NNMXwg2/PVSY1q\nNhscPvPk/bwEPs0MkGLaqjJkRKk1t0+k5G+RwrcwibAiqyfRQFUUoP4jfhw8\njrO7IrfbJTPPWCSTgHb+neDnfevJIekrN9/FKzlCVK0APXG5ds8+WEFq4GS6\nkDqjLK4QulyEPfibMIWiZ1YhOhjYFHHDsdG67NwfVZ6uLA73PaWEpDBFzrvF\nYWUM\r\n=3TEc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMpBivp898Nhu5XUuy9IApS7fMUq2QeXdkx2P2oiZmjAiEA9Zs4aNtfiRbzwD6PBnoEqm3uUpg/41Q1lQM3RTb/qEU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.15c09e74.0_1617209242737_0.6279178746272451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.4dc32be3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/snackbar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Su/JxPcqGxaEQSSbeEvZW9dIxdgcbJyn/7dWe4bDFEkNeEqHBn9gELufgotZbitoVuWgBLjYp/J9yUYGJI+rEQ==","shasum":"c2b9d686b07bb938076ae0460b4c7d6a6806937b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.4dc32be3.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQoxCRA9TVsSAnZWagAAd2oP/RIocKDz8lrTKDuc2ZOT\nxFXCNxZOry9ZSlOqy7A5i/rmlLwnkNXg+DryJn5Qnxl2saEbUuFJIh8JUHs7\nHo7wVctJROoGWGpnhgUnI9K6Euh0Ist/IfGRJviPwG5blqPRGradNPGvn+T0\nO4ogMq1jra81qvhhixC8L1ES4GnKsfkF15dRsMEwUfG5uHs4B2vvKyr7jxHE\njVwQ77cVlupakLfTf71h/B71Kfe2Ly2WnD5jb9C5nhtqo/L1dxm3MMIxbtUH\n1VNxB6OMciys4FTJ14EFrw6a2zY82JGp26pklfPdUjJLVWmzqb/XlZM4UN4+\nU6J+UtkcCCQgfspmFHFZorgPiLbExdZveKtrYFH3WWKWrb2gCBiHeCf1qXS+\nfwHAnLe+4sZuLp0ntNvYZMK64FppA6i+dXDE8D9in/jgvIKNz3FYXmBylyBv\nUZzFuyNXASigvU1qSDmBxxspYIHll/wUlRyjjftDd6AuuoQGmbqYcg3sh3BS\nenrJ4GViwkm3cUEQXN3FBNEM2f86r5ZdqtEh62LidF9eyVHeKTLHIqYKpgwY\nGx9Foth2cLd103oFmnQVtc1BQc6l9N9wgMVfv8+oaJe3eEm71DX2D30W2ZhF\ntj3Zg6zPd2+C/b3UmUjfK98/TjfPO+JCnLP/CJRdB3VJ5K9G/ii2ElBAETl5\noDYf\r\n=yZOK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICN5QAqdGZH/2xDRMvCTeJVG7dIre7BAtqETPEVjgFSsAiEA3a9h/vFp+dum8EbWmj3PEG4e3UtdIbRlmRftFv3mElU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.4dc32be3.0_1617234481092_0.19204402677575305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.4b717f65.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/snackbar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-0clFkSSiqTTZj9mchqjTqGewuwkytfaieV7m1t9+eAxOTFjuCRYx8Xov1dF1pbGSd99xQBpfh27p1FcWPm+xPg==","shasum":"9736b54c4cbd13b48d3f86f0cacd3dcc7c012344","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.4b717f65.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg1xCRA9TVsSAnZWagAALLgP+wYRxBkbfRpr2USET1Eb\nuJEgHuBkn6JQ+SqCYHsxZOESo0pRjem7GMFqjnUpIL+ZkTnGkV6ssapKdydu\n9E8jEFs7HglKm1T4ZS0i+rv6FuA3BNElBqxuzibUf3O6K5jV0fBVULMSWYHW\nHVe4fJ5X/uuQol/scVu8krglxxEcjYxpqqm0+M3hSVKxQ57HXJ3FwLa8aN5M\nu/PJcIx4GctFiNiLEOk6z/VfDiINwGhFA4R0TgXfqlTR/C6hQZX0yZ7tRyQo\n9ckmDixQw1dPYxU/soEkv2/0ulpuigDRgOcfmKz8C9iS2j8oC9lFn2gQ/A1N\nzALdxMPsRXgcVTFz5eAQq7VInI0RXvmVkyBC+ft2XUJhZICZEh7FJBhK8cS0\n3CEvlnN/rta4TtF4sQEd2mMLzcuIhq0efzbBOcQ+SYWVxOOWU7L+AG2NvoSM\nTddBmv8uiQX+Se4mN5QDB4PvMveKgf2P3+WqeXex3t6X7RRJL/gF1jePA1XM\nnM3CgzULCEiLycATu6LXV/vUUnwIKy031rHTGzfULwRHo0j0ZRevjeHJ5ztk\nOBUnmqQ1pXjq8CWJSiV2QZaQ+BojSmvuyGVljEW23S/x0ixFjMEHjwDNAHq0\nLSTJtvxeaUFHHGP2Rcvv28xxTgSevisSsX904ZlDA/naU3sGuXGTMFHH//Q1\nwRBD\r\n=9bQD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFi+fh/68LM0lT2x4HZX3+fnDK6Dt8lv5zZJiyxNdiWSAiBSrDzZ+w+8AJMxbtuQgo6ZzPtwd+jt5hLVmmdHgfwAmw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.4b717f65.0_1617300848845_0.3598988883145655"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.c6870f20.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/snackbar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ls6s1kFGAi21pLPCG0gFGd7sD3Jbm0dMrriS+JeRac6QtFMbjhEESh+dK7Pc8emjubyCv/DYTVDizbIXx8EjyA==","shasum":"c4b0fae64b0ab4d74eb3965631f717c2631c525b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.c6870f20.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpBCRA9TVsSAnZWagAAYQwQAI9rI8qwAw8gQqgieDEJ\nYI6u70r9NUMkDR7vucK7FfWq2u3li3gfMLSJ7qLT/eqIpL/BIspdF/IZfTPh\nD4l2AnfU1xpZFqFCywsGSmNid4GwQEMlnkKOhGsbpHvOuiTtV1G9t8lBKOIA\nt8NVbtc+exn2Q1yEk0TeeOqkd/d0ldaCNYfjEyvBThBgIw4OZnq9mzJmve9D\nqjfG1EKu8t8rFCo6hnVwqierAiUWlxDOPYpQy4kvmjAu9A+jba5E/o/ieE6X\negZaWgRDuvrVULrRO1GRxP6ga0ysoFTeSq2JykKhXN0iQoj/GCXQb0MmiC7M\njFIECTHRtkO1OBNoU0sDG00EKWnmFhC+sU23GdX9OmrPzyuojviF2ahz8uuy\nZrR1DRAPY9jeXbQgW0WRukqZ44Gz/Ihdr+AuQXEpmZY30t3AxVCqoGRIJOM2\nRuBhEkul82/Xki81d3zFPII68/lcrWsKgjbBX+QRZenosWd0TSRpN66MNNZX\n9jXXqV4bpawl76EsI+vKq0F8/dxZuCPM7BSGnE4xS38yVyPmGqmU7tkgRDzw\nmINfHY4/Mz4l1Teofrvmsa+zqbimdTQSlpBnkF+0eiCTauCfFA84GLPeL1sq\nGEYGOa+e5U+ESwIpAfozhs/2snQTfX96J/P03aEqtTkd/bYtbqtOnCTws762\nOQqP\r\n=1M07\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkxQwDX1B2IPfJkz6cXKYvEsZvUyQNML4XbdRZfj12IQIgU4QlVBLz9r4NZ2Vnd5zZNCo1jKcXR2Kd4R8LRZrJaL8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.c6870f20.0_1617320512348_0.9818327062162686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.852f873c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/snackbar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-v4IVNc90GqUYP/IrV8SQ9qLMpcn7ZSHkuREaW7+DWRDh/uT5frIx+NqHJTaHPNHbvOaN51a9tEVXZyFXBRTMcg==","shasum":"050bbfbbf0029ad515489db6263d52bb3740518a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.852f873c.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqn1CRA9TVsSAnZWagAAvBEP/0t4zXCKrjmd1ijqG2/d\n27nLWbcD4M7sIi/JLzz93/SxqTMjOZ8zDwNObRd2Eb7QK1cDCUEzcMHz8E/d\ntbyQ8Yajxs7mLS01CCfU//2HWelCgDo86ouBFT+83sOkNUdxrQl+rYBHQj70\nV3tFlIDm0nLCeo9KNVo3WBAvvPjPZrdJNDeddyDw99F+uaYnNdYfWIzKgUT9\nc5u0kuPU9hBFLKovRBmAkoX7WfWMCbYYrvoQpLbEM/gmOrVsDZYZrtv8n3MJ\nD5/OEvumgPKwdTIxW8v3YkKJRZJr5IZblqJOh6XBPI2yrWD5WMXUnaL1UVBI\nC/d4CzhaQYpLM9zHUXTtsbjUnjHf0Ha6ibhh3RFlUIxXRlNouyuQYmldJPTz\noi9u04ESwGDNCmSktdVh4MmENg9ICLb072qasqGDZDEh8zXgdYINS8C3AkTO\n0rT1bSmy1x+A5IPkfZOG8F+w5f5zrOv0Ue7pb0LPmPhtKnSTsITTe8pp3bJr\nw9cCbbTUXlpvC1R8ASYNIzRyOVMwIdPpL1ifSDKMwnq0yxVRFC7gveLiIGLx\n3yHg7/4JdQbY42/jvHZQNs4wCLG8VSAef9YAMAtVADd9e75AY3DQ3zEpvkTz\n27GyhfB3C1V4FmHmGK6aY3Zfaz2WfCHRPtLFqtYMYp0ftTGg0QRDmlkAspth\nZ2KE\r\n=5OJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDvcMN2v5br40D3w2CCXukWbcw/ck7eu+E7X+DwU2DlAiEAlf6585U6JRdaimmGYn4SV3FFvZn+sklEUvKxwifOmxM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.852f873c.0_1617340916849_0.016612550955085625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.4a674a1d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/snackbar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UU4XAHKp1olY+YvUvN/sR3VEf330Gqik7Sno1gdjjnHI6tHIcaZDsMjz04oBbe9qd6rLa9hYLgOEbNzjBqHIUQ==","shasum":"7971ccfcf7e7616e2745e3d9ad61536905764ecd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.4a674a1d.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy26CRA9TVsSAnZWagAAlIcP/0Xnhd8lJIe5PxfyfE5h\nbu+0wepADAJm8/Gk7qy3IJnwa5n50sh3xv0MLRAHsUicU2ggbbLyDJg6Mn7W\nItVq2Z4NH6JNtBRPrwh9pKeXRZ6vmr8RibvQ8TDVAZb9ctNVk0TuYoGlo+M9\n6d7D7Lfi4KLFC1BUdTVcAPaA62U96uMeGumqQhPksRLhZkQQSbc4waVF1+6C\nrNVHcTkmpB24m6+sLc7jk3xmpVo5LHCqR1aV42dr4gfReNmgQaMa5m+1XBvI\nY8sdR1fLeJ9ePuNWef1IDfx8x2e/jX8bA132WNDkK9Tc4U5KZSUmGT6ijC1/\nw81ov6KIEzGTksZULrhIeloJWXrE4Jj9HBkrEDe6dm1MUh3RI+f8Tj+w3/oH\nW1jsAmoJuSEQ1wDg9bRHlOXkJIGoSxNXQmPe7vb8v1Mw/gg0d1xDSF7n8tmt\nSM4IZT2UKn0XFB04vHKTznczhUlG39b8z9IceyaXLDT0gMGGlL6ljVCCjEWL\ny9WkKVXryl74CiuN9OWDXV++HXqZcqeNDCf2vgLQr4FqEwNvRpvHHP3jqrTZ\n6JjZl97c+bTYxoEGwwlGYoCU7d5MGmewliFr5KxxtZ7kC0RxQr3tWR1JhC8x\n+71HqrkWBZNt6KHM6HvFNjWzD++lHQ5K4LZCOYmGnQfL4ur6uBS4/kaTeNNc\nzMZq\r\n=u4iW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2BpwQXl9WScWgbAAdjX8B0Oj35fo6Kdvgy2WMxelOEAiAWWLPmF1C5wRZPu1qMwMR/ThMA4GwQm0sPwz7MT1Zesw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.4a674a1d.0_1617374650036_0.487019918769533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/snackbar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.24609b822.0","@material/rtl":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MsOTvlDu03xztarpS3PozkddDMubJhvnOTnYlPtmZxJneK4O1kDU+zOBQxgXZx+vtEsmFBKFbrK0KT7mKsRnWA==","shasum":"7274d3491f12856b85784f1f835dd4cca93d8d3e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.c5b29ff1.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga027CRA9TVsSAnZWagAAbwEP/2eZQTCGbwv2TRuqrsfg\nu4kzK5U7zJDNyRa5qzSKlHzhR1tCrOwLfKdoA/gSfniqVifDEI1BKLkbshrV\nJzrsbpeg5SrPXvBTgMtFpJn0EwMTRslT4upZfysieSodtrCII/1pyH1V5z//\nqgpPZd4zaqTKMnXdocL1AILXoHncmh72Ei8w2IPMZOkNPiDLjHlpQLe+0NPZ\nJ+4ggeDRj7aI4WuxUy1LrGcccllbGvn9gGt+qYub79UTVkKiphsJKFtQGpvN\nXxOUEoEt2Fqo8Zk0o90n6QfkqS+RSdCDrNYcVC2Plrmeaig63fLVJnZCcrJh\nbpQMVdqqI1bm4X2IQ0hHd9meHVqDJQfXz93tKa2kHkMeMVabYPwbY+i4L0/3\nDa5cKa6mqyVEyALkALdsplXnlIyMsEcbOZHliXzCAJ6geHThmX8v4CNc7Rn/\n+Q5FuhqKU5SdbxLWSZE2rFEBEw+R4GiwjBhSa2G82joWiN/yxjJ/jMI3NiwD\nDonpOO0KRlGdbbPvKvAa98Wpxuyog/4IDqxloVkn8MAbSELbKR44/vd2CDvY\nLFOJvJyB/wvs7qa9LR6GvpABNRU/RGvZ7mKyVDorf/5dWPw2v6gRNqwJWxoe\nbaTfD4sC2HI4yAOujmmAPwPPxHNzrSohTc73Qiy+ftdofiyl696UWVtUKg5V\nqzDp\r\n=fj3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwD/dcqxzLC42WsOLsWiWwkyE5O9QZM3PquwrxRnc7HgIhAM+rO06NTZmStjDMbAZRRdCuGU1oPw7PnOuLOppippka"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.c5b29ff1.0_1617644987292_0.6241399271681731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.583644a6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/snackbar":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.94f50b260.0","@material/rtl":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jgSQuVh74Wihw38d2lhw8FE86/t0p93ablSa37kGuEoxGsZNyLcvRYt1XQr9+iiSlWciW2wTFk6Ajf111iTp3A==","shasum":"1cca712f4f6e746e6a181567eddb447a855b32cc","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.583644a6.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga036CRA9TVsSAnZWagAABIoP/2OD4KcM9x1sIy0Kn8q1\nBNlv5vE1jBmYllMyAywW6koWoxLLmVaHNQ6uzR8CAtv5y5Ha8lglYnseF78v\nVuTo/b+m7P++iKDYgL1eh8emsEA6Z469KDT6BGtcmcfOoo2ByfghNzt6Txob\nwNEPOUEG2/S/9RUkWcfhE6pqmlKVefVaFDVlb8O2+i1zO0B/s17+7RaKDFfm\nxgJgCZIewjggfNm9xvf+uCJudQJbu8wO35SkHP0lx/wAR603rrEbyqWTEows\nWYsV09HhJjEQuuq3E5ShSXjPV5yiH3k9oYY+dUpHqUQTpG0X4MGqUxtzsuz5\nsPMk0vMAsNY2M/2ap4U8RXy680B8VkQEvaHqu4AA/TrqTgs+c0+NQwR2O3Ti\nA+sbrhpxbtT/frSVsYtDsI9PybA9wGLf7Ok+iLRwNsTZjmOiJBF+gVeZLzDQ\nJ6ayp1KeF5UkAfP+byp4G4/ZkoczT1RJ5OzA2sM0Ug5gjx6Dcp9p3RDq0Jme\noNZcAY4bNj6nBBOJTH9eIHaFEYh3YnHk/trNdYQajYnXpSdCndO7+WC/q1RP\niADxJm0MyEUAkjzFHt5oyrtEtuzKUrmCDPv1VVyhf12982jRzuUzAy4n+xsf\nhHRmulo3Dkt8ikUfJIYujtU6H/zFoUfLRZQBBXt+kVQS89b0ki2kCk/ujhui\nSlCu\r\n=eYWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEt9eBnbTZE8H3Nokvhd11hggmds9ezp6h1GpKT/+E6cAiEAnEePQYEVeeQ/DL5qhFoL+kgh8yM6WJzsmXItljA9RaE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.583644a6.0_1617645050396_0.470240824974262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/snackbar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n+s1SHMxesfJJByh/er7I1M+U38UHODMK9xVTX+FtzQBlhNVqIJy1g3eAuSfp8DjlhXd9zKX5S4ji1Ispuk1HA==","shasum":"8ea1b415695425384d8ca0846bcccc7a8ab53a4a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.02ac1e6b.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKoTCRA9TVsSAnZWagAAv8oQAJ/+9He1sG8saB6LvsLf\nQZG7TogjMkSMuHtQkgpwaF3W5QkBDz8hmbYV5EfRCxOlzJA5F/MmqJ6iElWM\nTqhcK6MZxuv4B6p19OT5OQ0A+SUFEJgCvREO02E7x5ZOtdVOr3oc255jur+a\nIyFxNHIsvPaKa8zRzbetq4WD1znJ+nzUhO8ZVfTRV5iqM5kswPDLSd8UFe80\nSQWBHDzLYmHFQilrsqjAkEz58uOrTGWYfaulMUocc93JlrjwflEjwkxrUPnv\n41LBBItOrx03GKNCLiPW2DIcE17qqkfWq51ztwzg+creMoQ3tXiy28tk0FAs\nGZCR11NhZipMKSgOGmcx3IQoUAFr/MEEF532TDqlroXgxRweOfQUb36hbkJ6\nTls/tIvI8Npg7Qcgwlp4TZ893WU5E/kjQXOhWOsmn0er40jWc+cE4ebToh+O\nyN7+rY5ZYNZtroS9+UVy5PLDfg9HbqS1Z5cLj0ZOVmWBE8lwo0uR5yNbKBcz\n7zE21/qkEw9aXBTAlj0/LN+SvnCgerjZ3EX/b6Pys1k3sgRexucRsdJHrDRS\nBdYA/157WbHoKZb9vo4F0LVbCA0p0y86kbbSiX8SwJM/GduDVsNOlA5aAaqj\nBZjSanWb2hepZbLPu0+AD2BhaJF2+xPWa1svkUNvq8CzmqYOLvEC5uMMQ6A3\nB2T/\r\n=9UJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHSPph2x+lTHNqAZwGAjTnDSvfiVrin+oCMXmsJ9mmKAiBUbA+phCBqV+gmkGd34eGPAMZIvpAcleTrOzDI9+BDmQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.02ac1e6b.0_1617734163591_0.7571426798525531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.5ac5856e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/snackbar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-L/qqaQrVPeZhofrIU0R0W9qRf9Ja5aa3dpFEWkM3ce1cVl+inR1Xbg3d8b7FJjZka1QVV7OGnDKLkfeu8+9/EQ==","shasum":"98a023591e93508d0f41de8312a158fcb2b36e5c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.5ac5856e.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuSCRA9TVsSAnZWagAASXwP/jkb3TCHxYmJXbgofMfL\nOjhU2uO6xa+o/mIlhMUJpB5gJMnrJw0JGYSH58EzlvTWnGtyizCRuq3rHOhe\nVpDKakpyr2UcSwX1edKX1PfA3s1KstnXeW3MEpxOb5UmIvH5zW8bzT5L4zdT\nTI2OeOMozY4upp+LnAy31tDGhj12xlk7CU+3EWb3GURfM+xINy8iC9l3rhsh\nLIbXilGWSvHwntVlQQczBx61vpfWiV1+R7P70lAfmARQbJSuYXE9/ZgduiHQ\n696aU6COdRbVYmULKiLIDv7NglmSFN/nekUK5zV07PX1fmSiEjNTQQe/GZrt\nkN3amjZoXVWNRHOl0/OCXro7dYYEKkevfDlBZcyv+fQycqYZMkdCNl6RB1mA\nIHpEH5gx/sEYM+9O8hHf6cZT7lNx0qbWvhx8HuI0LNv20fS6EuJGVR3Il9Vw\nGnFmcv0eB4pRV0NgWAsylhsf1SHUepC5lbOT6NFQsRJP3GOwHzp3hAEE5DLO\nnTC04CTgpkCF6Fdm6WmJYLdJbrgwNSl4YN9mIwxApnQ7XI1mskr+v6mZKPNa\nKSTIP5r1N8hlLY3pGyPw6nma4fwP2u6yiq2o2AVox8M/CqwjR0V4hVTLGBia\nr71QlD1t8d0VB2AXuhQe+355UXoAzYNgboCEzIxkrpRq0sG6Xei18sjCIPZx\nv3VI\r\n=fgGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyHapNiTxkVHDTCSFqKjqGt1BVjmNChQtP3GgbxyCfUQIhAIB4eqjMsBSkCGoQyYN3+RvHlGIXxZeDXC6S6AG7UASI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.5ac5856e.0_1617734546048_0.05022219445049925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/snackbar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ufVfuQd8ikdQ4Ktc0Umh8Dpo+8L7lJbPEyJIBe3ihCTgUMu8OGOhEEqNCAQ/dP1k0YNgletNIEPTNauhZNyQfQ==","shasum":"cdf0251f88d41ccc7d3b4a7ed7fd9ca6ff019931","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.bb23dbc4.0.tgz","fileCount":16,"unpackedSize":67512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLXCRA9TVsSAnZWagAAt8gQAKUXTJpgXcyDwEDABXYO\nkHMHb7Qv6BZk6FwqdXhuOBo23RbX+fNOEnroiKu+Fky54sAuWDq6OWVqnWzR\nBd13sGGzN4JwKvegDwgn7BvvRe60nbtY5qOPwId5IOCsbSVchMuVznzvz8q5\nAoeO42THCZxTkpfIa865qU2oZzoP65IP8IuRgSM1XWzCArxUVvYIWJU6YVu5\nlHaNjmD9MDkCKAk+IdlolZxcauKOS1O+7VSqsDkBXLJiPU2IdE9kFKhzQfbq\nVcFvC/8q/InLTOjb6c18DF7ZjFTyh+l+flZI1pBbrf9MDznuKFMTJZM3gUGv\nrz7gS8RILFYnR4Gfj+smabAK8HIT4B9WNWSfFpNqbCWNbcoCHv42wokG7kXN\naMeVcJorGJrkUfJXTAHkh08oAZdGSSQ5IWdJJKfan6sVkMu8DoTi3dV1s7XM\nZzmNXHqYVi87+DmHENVBs37EUVdSi1olW0X5dCEWtSPx6E8DXAQXmx/AQZ5c\ny9ZmfH4oBHVgmd0iUXQW4jUo0gsQ2vw6Oo9wv4yolcbb6QCyvMrFYWRXRqUU\nb5VVk2QBDa27tMaBV+0TqfUOo1CpPTF1HOGX8FDe8NO4V0/cu8uiN7uNOkDV\nVHWd3y6xTRWhrP+/K5L+u7X6+msVEMGyKkNs9FeQCfM1org08s8GW4y2sPL7\nHa92\r\n=Qu0g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCXEXYmkT6mgW6YmilrplD2aBJCU7EILZSXmDvAKWWKAiBLqHxwXcP3ITKIq+UhB9L1CXXtD/CakyOZaslr5MdbOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.bb23dbc4.0_1617830615416_0.5025284102427459"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.e539904c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/snackbar":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.c91e8d141.0","@material/rtl":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Gr1dfCvnr5zNItfTqwwTnMFmQDZNWRE0f0gmyDI5rsi23TcM1E/8Wefj+G/5CmoyMPFwKInTFr7HsTQ9KNbGAw==","shasum":"c5f423d973373e92edc6e3dd886f6c5ceabb0622","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.e539904c.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UOCRA9TVsSAnZWagAArrgP/0LDpp09c7ZokPBtNjKX\nywkhTJysAS3IpyXTSCfM8XZ6QA/EgoP/WLBO1S8oncDp+Gq9rwYJLKs5qHdx\nXUv0omiqGbpppxQUekkR+7fT4w6CUgHFE2gjxi7BV+u0OsuRVVM6PuQByHHE\nmvlciWr+BZH10fhKOEDgmK8gsHz6YEsNa0ujr5c9c9R9jO2dSiV+GrHrk+/Z\n7Ait0tGBTyk5YI77AATWMhmTAknSP7fa9PL/lIuATq5y11hoMOxRSg/XbXdl\nwjc1EJ8ucysm0W9OOuZ3P4f0iS/Cr21Ago0OZS5FO4UgTzWU0Ca+mfZZ+xKW\nk+Xk7LURlKINEWW7yScufLoEYXitMQeq2/5Rl6P8wJ+TgxBJ2pW5cd//vfFB\n+9EpZhy15AMzR03YhT2Vd3irj9nP250AkKT/tHhA+WgXT0UJlnXZ9qn0oGBI\nBepzesmsJecnwSYoFvXNk2HeKTLOBeeL/PHDX8oxPHO5xizWL6pLgagENwDB\nPjlpW9UUdVezxyH7024pnRTfZnxJM5B/ZU5NkQoacXyLKkWZTUP7BoQ5gOoa\ncnNKgfkY5YxKB4t7eN0i9tmrAM5J211rY8XkqLa/3IFRfVSMwx8H6C6DLCCB\nva0EPzsNPy52t366z9NDYiT1khos2Q0aYe4KFNMGmQ18YG7qSnkTQHxMCd16\nfGa9\r\n=iUE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcK0pR9gZBQIRFu1ZkZY8py+ovT+cuRkCciN7rpNGpwAiA00bBmIfdEmtzoSyiloJrZgzzQS6Wiwdw7HTrvD5iFlQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.e539904c.0_1617904910067_0.8053248078822395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.a93ae333.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/snackbar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PX6YfdLLr+sp3hsVdUAxVPB2iKh8kIJdvKQqxkzHpzzOrgy1E6aWHobTg6vEtTEwknPnOtehlux8JG5QlPuwUQ==","shasum":"94d17e6682d66f80297331eab8bd70c3e9d83ffc","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.a93ae333.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLTbCRA9TVsSAnZWagAAfjAP/1S/hLADLoozjh0Z89Ev\ngNa5sovd4F1NfXjTyn4ouotbR8d67e9ofGmSU/DC+x5as1cRUZIL+aUsNpVp\nj/FoZnMuXsPs69nJp2lj5Xa8EZgkz8/O/yJhozhdKED8xHI+699J5pnlt8LK\neEtTiKS1fFqp03g3nn8l5KqHm8QK4W2Pj9PARVtLcuvmpohKZjc4vmshX4jf\nyRJe5/8z7wIS0hy3/Qqn61spUWnyZzVZvxTQ1vX6YNr3qGtBoOEMBFjrE46U\nHsujPdb4d+y2kMLzUNXm356m6J3U59D/AnAlthkgzlTcqBjNotKw5O18HPE0\nQXWvQ158twYc6lSq9tAbpfQE1gOICxSm2oZJykAHk7q1uMpfnXYy5BvkNmIN\n5y9vYSOUQavWAccb7l0/ClGeIghvduvv3/qm+w86ywdJKvqA2l6d0XZZwjYt\nVBT6ErZixhsYENozdhEKhtpjTvfXZbOH+9PQW6nDLzX+TkmHdvKvrKS9R1CB\nscY0LeQl6+dAWn290JotaVNiR8cvNyiQjoj+ALXbVEuN4T9mCUtFisrfwZ9P\nuRxzhAjTXf4s6mfPjoGDkfFLR2+fSjbW8C4A4rOlzyRJsogUIYUjbiTx9nw0\nbl6DBwjV86GrEwteoUWQYLAKmeKbByRoxaIfXPxUdIcQZx4/caqZRovBowE7\nQvyO\r\n=YZlq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiZQQkzujOw1s+azIQgYs7NvLMhJg9UjcJJXYmvuhwLAIhAJWM4lS4JspvxbmFdsQ9ioLLvdnNhNWIBrmowtA/5Q0T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.a93ae333.0_1617999067164_0.40508652711899296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.e142c144.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/snackbar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-AJUE/NsyNk4p8TTY+VoLWpQU9dBJGispOgK1HM3QyjrASV7KapqKtbeNXVoKt9cyUP1wK1Dvtub8oMJR1nIGwA==","shasum":"3775161458059f69b5a97b00754edbc2fc83f2f4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.e142c144.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF4tCRA9TVsSAnZWagAAVHYP/jYKe4pdOtoxlZal2P1L\nZCWXiYbjMMBX3D4GiyU3geKcljDr7BtBxzhAUPZw/xYPETxXA/Vu2/Z2eZgC\njjKQT1NYFghu2G6EF9T8n40RiMkaRRc6+Ja8vAqlFqc/rIx2kxCqaLfqj+GO\n5avPfPvgRn8Nq0dBOkietArYLuJRss9Gt6HMrKlgIiRAsvEOfMhYzlcsy95G\nZ6B50WGJfrst8NKHxMzZigKZIRa9r/vgEHEjqmKRrGdeJLsbLNBoI5rWOdII\nFrvNL+qYSAk0u433tPm2SPJArajrlvc57O+zm3nOsZ4fb0VfVYzneWltPmhU\nsAwpG3Y0GdZi82i/eZfxbBF4E09iEP66sDo5yC6Oj5kyQRipOxZL5WItX5zi\ncnrQqJCvJ44gHt1Rr7QbrfEvoAhtHJn9ijrOGfmtewvtkVj5EPGLv7FA1wQ8\nwc893RjEXK59S5T/Vj4igLAexWNtSXCriKjgD0F+nFTj0qlELaCPnC6aOdKs\n52nREjov1h7rAgnQXiuwGN0TEtCEwuFGEZOVtrXTG4JnSe2ECIfeTri5wkna\nXiwgSHO212Y1UQllJNvbs1ZKBnHEMISYarw1hhIXokSD/ngNwqCA4tthazgR\nvWLa5Jxnv8khKBJKgNAHegZPXDZAHOevVSuRcEWw9C3vhqlL+iqMuRakqn0G\nrkwK\r\n=S7It\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGTspSCJ6iMO/9n791XJ5Sf+6KKIdXQ6Auop15IJUN7wIgSKiZ8q3ulw0WdGPaO90UUvZV56cJqVoqFpjg2uay5/M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.e142c144.0_1618239020912_0.8336064796177138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.382d7eb0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/snackbar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7KSz1SQFUrPd+4q1fHL44R3k48jU6nAL2Bv8RtF9lRFvIeEaReV0qjhb3wTGFeJIFygT1cIIce2o3b8mnw/ROQ==","shasum":"ede36c2bcaa31c2de002ffdc6f108042c1bda424","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.382d7eb0.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQZCRA9TVsSAnZWagAAJGoP/i0eCD/5tpSyfoi/m+RR\ngEgmZunFdtmeyoWfXSloBX7qWrWsaJ5glA3MH3UPrW0T80hQJ4dg97tIh8p+\nwD+h833tsOPU9xqv+PkOQ+Z5nidwxIRh0Hty+9oBoL0/bkWVSTqlbPYti1hB\n+7Uswr+ZgKVwo9vJByWx7ZIichQTg/C2iNYHSmFS6Estlt9QKaHYqqyMz2LA\nG7tmiFNg+E+Fl45zZfoPfuAGV6PRQFMpxHTPdeJKiGVFQLUeq9MEbKKmwj5s\nXY7jfvT6uvk/kbvQBJte5VnlzJIHqr8NmmR5gKY/ZpSDmRX9mKz2YKfSJfo1\nHHIZNX3YIuM9qV5acrcETnbH6m0Xasjv4E5G9+QyXMoAhex/PtxAV4MbujU9\nT8W55XHqIwpmyPOCRs1dxitXigm40baqDNl/VZHwgMv56LiFr7FcLjImiBEY\nYlygxr16ekL6moogn6eGwEUh371byWOhb4YnG3zh+4EG5dPU3iecFcC4oD4R\nMHrg2dZIB3y/JlBiaaY0CnKSuhM+GbP4MI39a2qZkvWOur++NK63TPyudAxd\nJ+9URg7s/LHB+kvpfHik3TLgip3bu3LsrErn+2/oOakyQKMuwtcDreEdD8tV\n9MdJhiakhKk6JuICE0ORspm0giR6n5+MiAPrbg70WfiWIyMOtZIAJfgcSyXw\nW5es\r\n=wo6H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIQg45f4NYX+Z4/8UbYlK08YXK/r3Tw5dZzBkRFSAvfgIgNUkrxUJcLUtBReduNkHPVzh2KDPxNZfweVLgxJEZiJI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.382d7eb0.0_1618265112531_0.4128102651443162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.b16c7885.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/snackbar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-M70F9hThVO0v7akF7kVv5BG8TJcBTvsVw2BIv8pJgU9x3bHO3EylwHE274V8X8Oe1RCIjbDROvZjoYTZaXgD8g==","shasum":"843fc2e7ee1f0745ff78732f65192e0f4ca5c972","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.b16c7885.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwCCRA9TVsSAnZWagAAUVIP/1JHg2vnwJ5ecZqyd7TO\nHner5CmbnX12SsyIPoduuFsiPOyM6Ry7ivc6ZJ3/XnojKnD0D+kLWyh2AEJt\n3HeLnAvtWU9+V+/PvT1IJjiS7RPznt54IByuYLS+soTtz1W7Ml/lqpK7nccK\n/nt5bBJ3qSGiJUBSzzu9atZ1gcMUhQGB4/ErcdYoFI0i90BdivDVUvV46/nS\nL/oHfHpRMVRDLXHu9mKvuJu4x/CNPSZBPx5njVZaculGCfynMltnWfjn3oY2\nNY/b3jsJiXVugkq7q+S9HhyJstUpv7wyGV59k228fL5P2rLQupTaM6JCCn3S\n2UzTf1EKOnL4/ZW1AVKeAjNqNoA7taJNVKtSQV0VnUZ/nGj/oR/fFlZItJUh\nwxFg4P9L65zcwJkTeej0Nif+nePto18Dsbfa/Xe6lLRz1f+oATNTUbsaDLqw\n8D0k7uGqgkB+4l3sEvbgqSq6HD1Yfg7DWiNXA+/F6kzuhd/bZlw0+VX9XqQP\nume8LUXSnOFcfxNUMbVRFqG8Vp5rFinxK4/bW67Yz9cYNh65F6OdaXUh8L8S\nVgeM4kazAyG21XeT7YDNqDpDwVjRn3IKC2FJwXYYyxbtx/rpRzmU9mLDRKN8\ns2v67OdZUqR1HKII1soAcstQ7eWAsTxU/LcZp7Gi6o9NBhZqMlmRg9BG7+5K\ngn9G\r\n=Bppa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFlMuJAa/SCkMS2iScqPUT/sRZtgWRaelpSR0p/Q0cMAiEA/+EedFtW2PAHs8VeU++QGEy6aNRTK1KZL9fmRyVGzGA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.b16c7885.0_1618267137774_0.3627922800732546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0e92782b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/snackbar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+vTLxaS5KyJI8sdjJUybHx47wZH0jzG/pB+CF/vdKgW25eSeQopkGClDD8AZk0KYZvR9cjUeXeKtuy6PzCDfcA==","shasum":"e7585b6cffaae1c2b998418ba36a7553e46b3867","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0e92782b.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2eCRA9TVsSAnZWagAASNMP/iQNjd/+f1Qf7d49AZJA\nYG+4JbEDFAv6+nLfGroUJO61XNOpi3fT6HbR8FYi/N+wClqgTLEfz9297+l6\n3sedFGlb6raEtozGiemMBN5dUpBZS1A8iK/CgN6b3L6/ljsQ9VokFekf7/lh\nS4CpFBMhBDXQdn6w1xpHl3t0oFOAFGzF+bE3Hy4lisnKmAXE1go6dT11HbsC\nw7V/4SIkYGQUldMDPn6pMIrAXCyhPNrLaAo9TmGq/lTjGEz51niL60ceD0OY\nabaxj3v2uEs0keDmJbFtQxRQq/sfhWR1sXcebl1LJz1lOqk867g0Oi3Nh8Qu\nPasQw/X1t739nvalC9ddb71Te944zIQcf/JMLl4+Bs0S+55j6AwuoeTDGBwm\nc0rzpCtmbPYYFSVReQChgJPBMcmMn0SDjQNZf/mgetvglwydSiYcE+6BdFM3\n6nq4BJw6rZ9Ody6txmMSM1R4SERqCYCJQ53FWv+oowMex6sAFyOGTMXbwOQg\nRSzn72Fm7tBHBc/9TBy9G28pFrQty0vgTGpGJaiJrWdFph2li6YT6Cp6QszS\n8PmaaaXkPlU/PnZCT3pcr0SdDUCEilfXZRpY2i3na8cZvxOVkdqgJV626gtg\nEDWFVebwaFjfSmRYSa/l5ajFulTlRwyNevag+wW1RSFk5/9o1fCZymkvYCSf\nI3kX\r\n=3cO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv057jKLvQp3eYsRhBmlVv8RuhNVGXUvzLLZLnLfL/ZgIgDy0/ilRsc25znra6khxSU1TSs8dopY6Qqqini/+pCSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0e92782b.0_1618324894526_0.6308409288164767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.70b3a072.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/snackbar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.352b295c1.0","@material/rtl":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-npjLkp3cfhVtiRTUdUlgPQoG5jpehOC8EEwKB17HvgnXO0RuOY6tc8+W/L+6bHdakX9kZpbM+dL56OYddFjAAw==","shasum":"8b2651d56af70fa5e99a6bdd4f0470220055af6d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.70b3a072.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2v8CRA9TVsSAnZWagAAjjsP/RFeQe/8uUxLLIwE072B\nzqOBYOdJFjD6V25Y8CuB62SGIjRGZhmKhYyTR2UtE/eMb6TWcZaIKmbhJx5O\ndMmyxwkN/M9D1IP+m3OCFJlQWsTOtjVpVVWXwDx7kiozy3WrbgUBqGu4C9rF\nljSXwwjircRoMMBgbR/IikW99I+Q3Xy+Ffl2OUK0guDeenh6Wbh9FCqGdbhK\nh9T84G53+15Zwn6AOmwr0R9iVNmSKS9wpejveYaPvkNSlwwSMLn1g5t7ck/T\nq+vQbsLlRcDEQlzyA5rSVzKxSkN84s567jn9yYqZX/arRQpz0+ABvGGUG6YO\nqp5vsMT59932RJ+lJUYAFZmFu9j+rqk6UHiZ2vIGU1XuAfXXrsmwzs+V8qnE\nR7i6b6PxZ+KOtLA7gnYBOAUfXinXUiMwYBSQVCKZOkCx+DZ03qgSCNRxgoif\n4M8aNfgkXzF6W6Ac+OSjYv6W8QwHyjnPVBX6h9iRx4K0shN7KoRUAGbZkl1N\nuf9Fu4V5TPSUNXY+P7QKaGathM754a1c2VlP8YPg+urYubtpcAGwHBc7nHBW\n1ZnBnd2OYrIQlUyVaQb2P+WAoSKrFSP69IADtxWPzWarQRtLZUWiZohcr2Ht\nhnQhzdea9jxOQ2ybpxq08NLF5FiMGUBdUtFiyo5aBTY3FlhL5vc+G4ZjN/Wm\nqDrL\r\n=IWET\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi9tnc82fqC9Si0PwjPjgfdsrSyB9ERwE0PpWh4mYodwIgLYwXw4lpE/qTBhTsSJQxR4fzfPMcDpK703Xo5oCXJZg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.70b3a072.0_1618439163566_0.30801672049198925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.ff79b092.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/snackbar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.3793a3143.0","@material/rtl":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VgKR9HnHeE6v3g+7Z32q8lH8UirYbITKKnlMTF9NNtaLJbGa3jpUuKClSoIWC4DThbLbAfff5SMV3YffGkiK3w==","shasum":"d624eebc5bbf356d754d3d9f171af0e0b861a1ae","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.ff79b092.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0ZCRA9TVsSAnZWagAAJr4P/jRsXNc63czvs8CFddtK\n28qhlc1VLTUXZhokjPyZoVJIKC1VTk+LAylj6AGpVi9pPNnNF9NqpTVmJuM9\nzjVkNUZrXf7SMW0AVGvDXhF9UXF1u7nrA9IWErNTYiorP8s4k4Z1cv3O3pbu\nmI1owpW5l/dIHt+15lZXuTV6xiocw4FNixXdb6N9qxyf5KJpAUFOpzDzGkDs\n7vwfiiZtfUWU5dbpNFZr47Fz/XrcCXWZHk7u207XLSAOF+vg7HV+6L4Z+hyq\nBkiHVBW+pz3L6C6roKzl4Q0SW6ZJQ3Ah+bdaywuQfGjpssgm/EWzqeV+dPnc\noAH7hhed/lDkgM3pHcp9U106mr8I4PmPg3Mwgj729d8Uq4tsiyFTrOuaXTIT\nMuN2EKjVaIBXz0cTT2lAElPTGSySv9tfZ+F5dmEoAFsZ3xVGpqGFx0yZpjHZ\nUbOQ3mQQ6LOEz+ivUNcHUoRsrybTJHie04Qn09bl6WTUuZ2FBp2mxoiO0ZZK\nKtO4GZilBp8HxFQedrVvlOnuqnANAWWNuL/0jARulEz/jj7+405/JdiwCzie\nM/27Z2K6RWWksNkDo/T23WNW1bCVMiBcTvlBwPOqFhskZXMxSWXzwumnR1j/\n2Z8ee/Tz/G8S0mTH3AGQ+Xv4/AZ7R0UyJpWrpHxel9UYVTg2752qvHos12pZ\nhJB6\r\n=uqhO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuYGnNnprzijYXnn3LUetSXUU5YMAASXM6oWEagzxcywIgadpwu6AF/omvlPx2TiAuba+8naY+QctX4GhhQbUVyyM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.ff79b092.0_1618513176851_0.10882804470874885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/snackbar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=11.0.0-canary.3793a3143.0","@material/rtl":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MFUPvbJSfQ6jrHcYYIV0CF2AOqDHOJWuadro0pEek+v+WaAshOcehx+fCZIDndctlM81JMFVwvicc7GIRPwwxA==","shasum":"7f2b8036fbf05da9eb4aabbc91cebca5ea95e722","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.f35b2fd7.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+PCRA9TVsSAnZWagAAANAP/2XBZ0WM5yR94e+HO0EQ\ndYOaAUoiKIIkU6pXzN+L3fgMQ67K5UXOGrUlEi7YKcV3FVcpIHht6myROE1j\n8z53YWQTADJ+yaQ8J5vrTSPjVYeJDqU9wMedCeFMqyZQKjON+clly7RzK00w\nGvVdAvFVj0zNDespMk3ULI9t66WAvnM9cM+RvDyujOGe3cNJZjZw7v2Ap/B8\n8PlXPrWuF0NSfbrOB2LgsiFuZfRL0iCB3964oU03DXZdACF/oWDAzodCvar5\ncQ7DEbdk9vodhyHXmi8gkWIhBUYp/F6iD+XiAU55NN8wWtUraKJ4ifmQwygJ\neYsQeoDBqBL7brJcdYpFd1ci/NqcHDBpCYOMJ0ua3uIIXEWn/cWAb7TSssUx\ntUs0oD8m7QylvHRLcOBru6n6rhAr6oU3v6IrkswBSqP+5u9A2euhrdq53Riq\nd4DZBf9qC/vwVXnu8A4cG4cQ+DNdKdQQUgn6jMWmgtH3uBqy/WwUQ1LxYgyB\nzkTNKpnWSPQpqLLte9DJI3P1FYgelksTeIGs+8451KJvedZS2evJkQ2w2xZN\nsxlsmm5PV/5DK2ZzxfrHt/jO4mhcdT24yKjyFLE/OznxowiifcHJ34MJSJS5\nsJbWTGqEzB916cxZNsstmXi1gTgxwuLAA8PdjScAz1QXwpX/hYWzqm7PKywx\n/Jhs\r\n=32aI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvRrXmiSqI9cfvHAy9bSR5ZRQSvZhE47NJGm+1g6bhZgIgQRQzVVGtk7qT3w8EQw9rBsVkeRDnHs7xman1VYbPq8s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.f35b2fd7.0_1618513807008_0.6509060205252057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.11977cac.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/snackbar":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.3f342c3f4.0","@material/rtl":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AKCMS8fdDC3uQvOHot1aLHSCwoHScOzm5pWWbCaW0LnPuUBLE3D5opNaKD+TFpULyhBzm+C7+V+KVturrqdXTA==","shasum":"744a8c349a93c207dcf55990138438eb29d95bbc","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.11977cac.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEOCRA9TVsSAnZWagAATxgP/jztGEjUxw82RD0H2by6\no+GDWLkHnAIcM/1sISq8H/LPr4V7xi+zrflKX56ZPag41Q8JdEwJ0NifWG9m\nKReYhSkV7yJ6jSEfPK778etL6i9o7i8HSSLD33GH1ffVevY0K3taw3DSg4o5\nTjCJdOQbn5PLGANU+Lo1H4OED2E4vF//IRE2R9yrFLX+fT+FAKAr+sRZumcX\nPQbmyYxnruNgeF95Pk//C7+pfn8iU8upULEnK1zGVzGpthFwfw7U8Ydmli1X\nVqKJzG6hsC5saK9cA7qxAoB9JaB0O+uPGVcPLTdPxI8vwwN02+9VugBg1QXA\nYXMInyVaJpe8mHQFr/oZthXxz1nLyeV3AtWdvdpkUXq4foyNCpTd34x+rlZg\nXh52OQqV/nR5tDL3sbij1cwsLA0E1LkF+KBXIU/zhj0BFVk2V0hcouLZP/KT\n7AHilJhkw0q38ffseYDsvBAMFxzCATOCrOI/NHtgjG5DFryS7Hl0SFZxbY2l\ndenJC+Lya+hNoVs/VrVl3CTdiAzPJkY4H9MvGhju1GPxkTN5tsWUi1xxNna2\nNAa79YCGkXLBwK7Iza77m3uqkVsNgaAyxXyIS0k882d/KoqguX84B0o147vq\nuezev0bkP0iPenm0UO4oDcTQwjF8oySua5oTMY/Z7mTFMJOKtnu1ACvCy38s\nXoP3\r\n=S2AS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2JZc2ZH/oQtgd3nE0SzjpW9UmS/zgdFCc8f32YmcJ+AiEAt7To3J1cZI7hJ8ii4wS86gGKTWnU7qqUER9BMCX24dE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.11977cac.0_1618534669932_0.8998235701233057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.018ff45e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/snackbar":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.cad489689.0","@material/rtl":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+wZ7MyVGgRymzow01elhmTypagZW3UKTgG6z/w3aSN2ZugnV+GXlb6ZXAAklKX2mu3WEzHiCkrGFhU6yRYtjUg==","shasum":"f27c0b9d25adc1a5a4713c85e3c7aac33ae64db7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.018ff45e.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3GCRA9TVsSAnZWagAAS2EP/0WZowqiGfAwaPYQFoSA\n9kE4GhkuQdf9Xyj71aX+4eH3Bi4WUoL/DEue0Hgwo/wEh+V0dEFbag3ShGg1\nia0vb1yxUtYTydhfflEMdTt/JcLqF+X5CoCBm9Pa3gaL1/gCZApSKqosRoiA\nfkU1a5YV+aQXrss15wBRw3lFQjULCG7leMRVl7iXGM0E6w/AuT5wKNjr+8B9\n8opiAhNMMluqJMIk2xK3HHA1qTlGVEZuRTxs3fSbxxCZWpHbr8fUeyrajotB\nEJjxiMjyKN98qobAP2Ch0v71QKuewOPYdTnPXmeLX/L5nyhAnNAzCgQWUhfs\nlrYX8c4wa9OSWgx4L97r3ZJvk09ptp99A0HFi3wyXr+4NOl9e/hFd/D6KmW9\nwrNQzkU5qw1XdrOg5vpX0XMpo66K62PzIwHo6Bq569CsIRk6YwXZy15VLRDt\nLM66dBqgqh/nbMNAoI/G0IY1ntmt4dcSRjIQFKiQMTp4TsQNJzRvU31FBjJX\n7wek3Qui2kQs8RLaRIaMFuEHNlJvcCcrdsqkipPHprAv4LHv9NICtqs9e9ft\nxOMzEEFq+dT0T/zR7f6WUHuomGU4v/2pMjC/Z3bpGl1UifgE0ykGfgdP8Utn\nwJvqAgwJlJDW4HLBMXUetq3UGfWJkchHBfaGIYMM8wUHgg1BKDJ9Y5B4p2x2\nEQ2B\r\n=VkoS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGC9fF6eLRkr6PMKiy4vFOQTWFycGX8Cz2bKzVnhWIzQAiAeK8HAlJXvNHzKZ/m73tIhFp1LozGa97kGWcTHpBPDnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.018ff45e.0_1619131845995_0.4688136412921813"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-51Qi2+w65eZaZWNQN8El8+B6ivn82OcR/kbPp9QPwyUay16gq8eAxnMoVLfLvG4dSKsb/44Qmy2daA9U7k9iqg==","shasum":"f06a3ce4a5a62978b8acd5ad20dfcb386389b1a9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.c99d1fa5.0.tgz","fileCount":16,"unpackedSize":67552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiNCRA9TVsSAnZWagAAU3kP/0H7jxU5jMQvM0XLPnZm\nFWpeXuoy6JYgWPMQnb5iPEmkmGC95p8fnspYPFvfZ+PFy4btrsZ2RsNbVqhZ\nAePpcmVKWlU5EI4B8vO2JlT7QPXTt9ykEoY3TelfskJY4fFNBbh9b0vdpgmm\nnuyuIYwt9yDgRYziw0iC14AKsdxHd0N4Js8U6H4SbOTPHKwKIbyeWPQE45GQ\nuqLxbr7ntxk0jM2pKXbTx5sGKk1n7Yo0/W5+KNszXsVa4tdvrrO+ZXgxPya5\n4DSnr7swlFNspuVR1WqkoO54YUJZMb3+icFzgp8qDVyqglbFPfqqB1PmjjEE\nzmofntq7tq1qFDVIgglORPsHXj/pTAo0ROYW1ibs967PwXuZfpdCHW/t2Gaf\ntXKOqinoSg7I40SMluYqCTKg+sCusH4+Y1W8oXeV3psUNbU0Y1KozwBw7fhJ\nxi3yuE5n+4QH+vZBR/PQYHCRPGKujy9KQJ4WO+EdHcSqX/HDO2yaEmDcoHA2\n9nbPqRsJG+NTy0pbcK0vK9ZNvR726xD402Ojxin7gEd87XoamOb2Z9+UyhmJ\nFTnQ4TW7ebSQCkZKkvVhwV0QicLhanYgB8GSOVVnqifamMpzxFbawENuFfOP\nza/e2JCV6/Muuq6/Z5FAT34cyhX8scNua9PgRWyL0mkYdriBcLiS81/3+0+I\n1zGs\r\n=hvcz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCICA9xcz0NtGIKKo7cjnpXXiq0J/P19qhEg5B95vgG2QIhAKWOf0cVdrg2980Elktr4zqIXbcUqnZckMxfPKMuecHf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.c99d1fa5.0_1619466381238_0.22006479050861416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.eea9b304.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BIu3xDdDeoHd2MsneewPYWIQGg3Lq6RFVCG63Y/yHCxldiTDGe9+6OiWjvVDj6Q8TbDKqnPJTCwzLvplptVT/w==","shasum":"3de627cb43bab6513008078e804a27cc74014297","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.eea9b304.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXHCRA9TVsSAnZWagAAQ5EP/R85cLznX3/9x7KwaMLc\ndhOAtCltHAWAwI4VjoNYd4+TBqwc/xjsJY//svyqeEEJfbFTwBwJL9cO5sBy\ni+8K5bkqoNBnrXMqRcN6YaTmtJ6/jHg5xksmIIM48mjyb02AOfCw0SQY6ImZ\n7goVNuSRsBR0kTZTG/LsZkJvvdT9G9Grrhb/KYVKPDUgegBW6FtKq+9A6D24\nCc+bKn6uKgUUvkrvKMjTL7kZxRWmirc8UlrBgp/TGX42pnWzLnebV0wR2j/w\ni3piz1GO9zIHC5vXZ7Ktv3QKpdlS+2v1NhV3l8NaRfAYxr3QM1u3ttt6Dk+F\nV774UqgMSAyi32EDMFImbXu4YJxKajmRhA52WznUlyIueyrWt7TE/2JlNi1k\nAxaQdLg0Bn+oZeC7fWecf0pkz/Uric5x6/Q5rGPvutT1U1MKuyUE9+wkyGOP\ndfGqXl4f+0T5VGFvGAzv8eme1FxfTkGdzJdfsTJEGrLdpd9j98gn+8Y4b7kr\nNSLN5hR7g5hlZ7TXTCyrNWjMEGex8S3fWGvwAZybKXarLXQV8NhhfLVavXb/\n41Qu4xp+8Kzb2m6w4PNZ1Ky76RDyoAP41d0uQYn7h9a/K6SkABh4T1S1+V7B\nSKWWfgckizYfco55/b/yUmNNkYuRfxTEHX5Pm8/hc8VSpB7NNC43vkPmLvfB\neQF3\r\n=21fK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGU2G8wy8ystGo14NjXbCGwJkZxGlxAy2/h9/BGxFvlqAiB4SZQngdP9Tgf8xjuSxepWFAwGBmjBgC6+WUaDXeLHVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.eea9b304.0_1619563975189_0.5223057947447969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bOahrx7Oh+QxRLDnKed73SN7jxPs6Xzumd6odBZtfr2jDO1FVaCt0uGAiaK6swz8NXZvcG415fiI9Q087/Waiw==","shasum":"4426f55b616a9b61131126919f065e2739ef3d39","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.5dd85d0c.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKeoCRA9TVsSAnZWagAAC7QP/3gqS9HQxGs+czaNbjvs\nGeKpPVwzp17lxco/K1Jxf8a9eBVxXK93tULpQcg747XS0RlktMjdNF0GWC22\ncBC8olvpvE9xIN5SjsLbpl/tikMh7XFz0iDCDQ1YPJx/qOMr+jGvkoiEJWdQ\nhi13Yme18zAyd2QWDcrlEFmBOfrjl0cDlKjnIozDuoPh8kJ0zdt2YMeFQfau\nPhjgV3R6rkUxPpnmOz5qC1DTAuoAgNkM0Uxm+8Jsb8ok/uKb+OwwMoivqvSP\naTvJG1wWTsA3iBN+lXkJuHA1Y8LW6joqx9/MtlpJi9C+F8J0ffKaBhwoM4DV\nUb38tMVTMdWN77FScli7KGZacFmV4ilZbceXPmKCg9BuYKRQS+gl1pKHxFOZ\nPzSom8TdcjtQaGfOLqytU2IJtL6+mBJ/kKZR6c0hKkGOeq7+im6gFCQm1wc7\nPxlLvgSHTGU9+m07OmelDHIDvGbsRafqohxT7ZZeBy3fpHREuuGirVuCaJ6X\nrAfJN0B3kePHzbWZPAWl6vPo3AtyD9huZRGAqG5/RyDceozqvF2gAgBrDPV9\nTYb930n/w+FY6+8MQitScQxkCfF3lw6PLtUqvuEv0lAlic8Rt3BYs3q/awiH\nIaCPacl/kF6H9sC5UiuEQxcrKdfGVw1sIVjgcpzS+T2UFWyMYalxclCeGGM8\nbXex\r\n=5pCB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbu9uSeSJpGNX5mogMn3yvCb/dcLoiCLnJLLk8duFfjAiA+WEHBe24OWxe1DLayItNNKg8KffqX91+lFNrzPy61PQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.5dd85d0c.0_1619568552197_0.18817069922643004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.cc813cff.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ajrvGiod+PbpLvLZhDNGi5YStCtJj4mTFXJjrYjoKF1qqDM5780hOLcyMVcFMZivUGy18yY3RkN+Epe+cI8qTw==","shasum":"7e64cb1c04d17e7954f810c5e9d12d57cf74958a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.cc813cff.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRJCRA9TVsSAnZWagAAsPEQAIg2+D6uuFU1iNucjSzB\nWCA50fGc3OCmX4UJIsRG4K4nlFo6pw5MfAYhFjBK7gtt1Ykrzn8z5RIlQf+9\nZempZ9f3qAYPyFt/qZ/zyRTwE1O4YOp7NKrPDIq4RxLdP8uZU0zhBTcgryi+\nov3wAEnCizEszffH6ECUNLmBnGvArRSl3ctl1UJpwzll5f8l6iVttfL+pzjD\nh5kFfMKunU+b25bamX2IuTRcsJ0BMzcwQj5nEyMxK8Jn2yKCdbyM469nWcUu\n+ZYG6RzJIEpj/9Nb7zPmt8IENGtIG9R856nnNziR+e4Lx9RY4n009pHFiSAV\nCmKARVQyYi6Q+umGjFMB8ARp3I1on/rI6wFwwokdnGU+0F4LqqHi0vObWj42\n4jLYK3zVM6AEUlJ7gb3/JgTUjI/ph0eHP3Vsj0DFH3ffxWcrNlzdmJ+kZxI4\n1fqgrij0i5ckCxhvcB5VSICC4lx4PPU4GzXRGdHxBBYfVHzSCAuCkE5a2lWw\ngOfXWwiY0BwSDg5sPdsE94dRlONkwWmbWIa82Z175oY3eYCn+r7wogrGpjiF\naRetRUp9d3YfEK7kZe+k7nppC9lEAeQz9KXkfynqEvU/27gu99hdpozsij2B\nx0tNtV+f4sPcdB3zHXDc+TuCMH9arTv5OAJSUQW6oWvTfOXr2IFkurzbgHGL\ng3sL\r\n=htjd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFMZqwszMr7jA1EXS8WS9Sv0iZgAxjRCXM6hgtDqZE/sAiEAm1SOe/4ZnULAxKFttnB7KESjVL41lOrHWrbszbqrjg8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.cc813cff.0_1619817544725_0.565870157858094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-snackbar","version":"0.21.0-canary.0875e898.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RL0/vEV3nPBBdtQZIOIwj2ww4Qwyz6sS2J+wNG+orRc0X+yGK6YCn5fONTWiqzWlmTI2o/z6f06fdytdIVHkOQ==","shasum":"e1a404f132893eb55627f1c1d0f763bb110808ee","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0-canary.0875e898.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHYzCRA9TVsSAnZWagAAyuUP/ioRkhBUcBonRTl4ZNai\nmVCz/kJ9W2wpWbbWL6rcivZcfSX0NEPCOM3nNFBVzVNF5zkXN/1RNDuHX1+y\n6M+xgBN2iEWKRYI39chZ05DTzYeXmifzDHiC+FEaTnRJp5+0cx5GPvdfqmPb\n3SOJa5iZavdDjHqyguFkhKV910M1kRwf2j/mMLLDxBjusBMvGQj7lIdrUQWS\n85ZqmsYMHTWyPcp4y5SI1cmL2mCBYacvoh1XYOwSNowFVownxbUfKOphQw0o\nJoKyALLEe5/iOgXWRem/CcHxMa3ZMiTUHO1aXKu7iGNIpXPozbdL+D3h/Vw2\nJMTn5PxFaBk97yw85cf4sUXxPvdZy44LTicebTxfoxDoPXI9UMwhczuTWGsR\naxLBBDwCpwOTf+3mwaEPFEzrZPjAzwHarisODGC94O+hHQmJzh2VeFWCY3uP\nvVvwyaTQpEhtpbbFTqE1qWJeOdNKDmvMH+svXCyCbfykp9lBF4OkZjE/mNAN\nmnN6VYrC6S9k3ol90o0atRMRgdoEIBorWHcRVuHOSjkQwro1mxOJF+O1pZb5\npZE8dcnQYoWx4qpMUCJlkLsAlmbsuYwzgZXqTryVpL5s/e+bjmjsX0dGozou\nGxZvhbeB5WJj2QsfSLlW1qMJnM4+MZ6ExU4uB18SVISViDSbyJODIKTdWluK\nbfIh\r\n=8N3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSehiySyZMsFSvY5GSSrPZ3TLfDz1CEFxremFjoaXbxAiEAiHEfBa82LfepbkCQcuxh57ECRi677Fd41doJx3a56WM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.21.0-canary.0875e898.0_1619818035070_0.45399438127001934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-snackbar","version":"0.21.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-snackbar@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-AgtoB6H2eiI/PFne4knQgLKbDveh+kWxihgfDx4tqq1q09cwTtqHZWEDjDRrPB4ntv2yv80j5/wGyd1+/NeHoA==","shasum":"0d0132c7538409d1d0e32ba16b79fcf85ea1d400","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.21.0.tgz","fileCount":16,"unpackedSize":67595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmKCRA9TVsSAnZWagAAI0sQAJddt6PzsNZ+hCfYP4Od\n0R5WAI0E38dlEP2lERMCB8xPwyPeHbPg6SDGEUL2QbkZpGMVOE4u3Xc+uLAc\n83jh7S69osm6jVOFPw0HLBBpJIjL1SWkN7sEz9edlyIQrgJzx7C8Mf3mfIUS\n7TWOsasSAQsxNNrmJs1LJKLhIoBFFLl3813IniRElYJyhoUVbnUi5zjgC14k\nIwZW3Rwp5uOTHoizjUsjUtMmW067yL9GIrcpmTTPr9AHK46AqvQqh1bs0HNS\nYFK0fkALsUpR9HAN48WYLGKoEvMk0t4Z9kJrIT/ii0pSTdeTtCntiDH77rVJ\nlQNhHelCnokec5DeO0fS2aLnV0b0YKAjYbKUwWpUH7Xa/lMvrYtPfzOPwc7Y\nCxiAjOpaoJa3n4PoV6s36bGjQvUQZLkuHVCrAMrXcQWp5NkdzyYf0zXZeZ6P\nj6kds7gpq+fkbcOkcg6P83zrsrbDSBsmbEu/1FsIo0qeYLBHO9DqPnxRKVfI\n01IrIrGu0hmY15eLovmVdMNB3ylEBtGdVsMjVxQBp6+csjn8zfUegQuCf8jf\n20MEKF8YkOGtsUOhpgf5WWVM18zLCGNPPtkFcVEUQ5xAs5/LvGiA3Z6TKjif\nMS6DCmo066NHjIK2jMgr96ud639GR+qxweL9POBm20ug6U6OPjHMcHNJ84nZ\n2S/o\r\n=rlVA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrxKy4l7sUzBy2EN1hH3ShG4uMIlSn4P4dZWGTG07EywIgEH/obBkzTnaJ1NxYuMc1ODa+Uz45IqkTGpx1HvzTdY0="}]},"_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-snackbar_0.21.0_1619827082516_0.4129646425480362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mPqt/na89uxwBQjDEZAyA46fp9M7N31u+oYX2cOWKpBpUYWwyJPyXyRHUuNaQ/P8T5jN7LVopKOtb9GMJDzA/A==","shasum":"42502e398b25549315d47ca679b2f7830ad29c95","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJsuCRA9TVsSAnZWagAA8IsP/0IfZDoBjXmIuBkZTLSK\n6/vxDYhHcPI1I1/uwIOlPPTKHtU88OicrJw2oRHjAoVRC6zly4E38ylDangw\n44RyPmkyBUHqKpiIRmD9BjSa353hvt6bFyGagz6D923vLJoMHu0KZ7op2ogd\nNcdQAk2Xz4ilr+Pi196DgEHWkVmrKxWZ/LJKmFb4LYxzkYzcTMQKEcZLRaP/\n4IhMziuxoOHP7+nNhTtrmxwwGgbDBFRryewP0x5Ba1nhhfpWxt9JypSebUY/\nGUPH58sSg8jcl8VjozS4xMgZbjTaWEYIw1kEJil/risDdG6/N5t+2hSgZs6d\nd/AjFJ9dbn3371ireeZpjSSxZ4SutOWLaBDp2J22wEIsS5csCOpyplySSd1y\nShRenA8f/u12YIaWdHdIIR7Mjaf7DCZehlRoFgbDGOwppnoagX46jSYzGXSC\nCbTGZvSAAGAmLI0iOHiLhCOtBxHgET1FmX82kvy2JaWyz2hPE54YB1yD3PLE\ntEsmWdtCWMcx0VIvW0idyyhkAF5APyF0nvm7NRs0t25ix0BroJj0NG32tgRH\nhX/F9tBfixVtVA6J1pm9aGpPNdXXP1Utc/HD1arPhQvViSeUUY85emh/zfqB\nOCr6HgnYFD97DCKpcYCMPNZhvCFJx3X7E9cas3szBeb5nzgn3G3F9rQALUB6\nPMlx\r\n=il43\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa7yN4JeQ6wD4dd9wxTxeMvvGZGjTSumAEKop+ltMpbwIhAN6S+sPzAL0bBRJ3lDuxUJzlZps2BsJGNrBH54o8Zf48"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.8f1e7e1b.0_1619827502450_0.08496397055660498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.deb0e792.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/snackbar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D8DQQWWPTaCyAmQgmSo+xK53jgWMFi9ycMIDqffOh/J+4kUgOtVR/9uOaA6Y+E+x27N2v5qp6NS5rZMANzoQhQ==","shasum":"ee1e7ab637619278db6159fdaf2add71b888c38d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.deb0e792.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxGCRA9TVsSAnZWagAA7CQP/3wrSAvEMK0TljhL+IRe\nLkXcwy3jiUr2PxcdPwxhLxOKbFknFW273ng2MjzZEpomIQSGWr4GFsgCtv8I\nT+YeKz4aINROos0dpKVhlIqdi52n7W41SNY3F+Jw3+6hQGGLglQNTfJLAvGk\nNVyaQo+YrI//UOdZ+aPVIBWSouFzSgpObL/fFB91osOxMcvZ02rwQcfXbdeo\nizIN2TX3pBgND3RVOUjAvmlObBDv8bHYXB1zoOXb8YOKKonDuLAbw3O0wtgl\npkByrjeTVFVh7BPBlTYUhip1R7i7qR7HMHww6NtvbV1u2YV0tZdXB5P2ZlhX\nML5PwMWoklYaayz3QLWZQfLlWIwffA2tn7AUjVJXYc6jQzniiSvC+2497D1C\nlRHqkpj3RcJAyjDYQvV9Gg7XsDPRQrn7DSH3KWttOlqqV35KW4SUk4KanN5j\nWY310TjqKFAybg8fX6nFHyuOZwk4rONch3vLF0P3MHOojUf8LaHxveNbQ338\nrgd5k0aOe0mnA9KXBkXl0Cu274lla33ND5VILfXL6CfTnCmGDoEp8YdTdozc\n3BAl9/ztTwLuTwfvjVxbxy6k9B+p8RoklrfTdMCCAkTx//UnNVNEQWZ0qndW\nL3X/OWdzjadfS3yPR4joWdJNw+jqni0VJooGv4C2xpONzmQ1wmp71FNp/UIQ\n7mQj\r\n=ZKCG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdbA51OYfsax351wWe/4OfLylhqImah6wLyqyTuaUwaAiALnd7uHTAHN0DZLcBhB9iwpjIBS5ijFwdUrUg7DdDvgA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.deb0e792.0_1620077637592_0.1347437636204858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.a3ff615f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/snackbar":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.474836ad0.0","@material/rtl":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LQ0vtw6+M8kHGXiBk4mKOp3VE3tymfWJ6dYwhnOqfPbn5QFq1c8v8Rg9A8EPWLjlJ423/L7wYd3fFhidcbsCjQ==","shasum":"4f5ad651765744e9e7bf0b0281d3cb57dffaeb73","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.a3ff615f.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHoyCRA9TVsSAnZWagAA0XEP/0w6QdUVr456ydihudQ2\n65+vs6cDitmVbp8BmxIRV7EHRhSRSqtK9b3uLd9xslI/oFb0eqHZgxoAMSXD\nWihvtrnDCEgq9yn+7kRhkVzihkOiE1XkM4yIGR4K7ZqWYTzzjkoaNig7XKfJ\nxMkRcepKNlHt7fInTCW13Mb2w5WNeGHYCR1cRKQRvBCwRsd4mnThmsKvEdpy\ndbewQuh8zU2F9OPpvQACRjWjS27Bh8H84gcST8AcyLS/Eu2ofAv4SPQ7k5Ui\njmvvuslY5fo2T5YBB9JRUPzFtt6chE+LAiIR/Fay8P3Yn21endEvsNDNeLsU\n0pUyGNOG7UMiAXFcOT+FyhL4pJ6yFtbNTBBLWvlLUTCfPQjDpdC5BmHhVYSf\nByyfkagQ1AXftTBkWEhg0Ya38/WpHYqAq+eg3pkoO8pk2Q1JJ0PwKEa4VnFE\nzD+5LI/yKH+NnoXeI25PX9QBqrGtStSuhJMuclvui+V3iS2WjmrxNKFYNc33\nDCUK43fAs1qaoZykxRXik1duA06x8lQnVC3n86QdHGDd409H+SplqQeFXx1N\nHwu15hJPzTjNv7Ow5px8WHqyRyipRzQm717j7UELP/FFfXjd9sqyfrbPKfDa\n6Hjskcw9auPCJjE51AfsbVLwoWzeIlWdTQi+p7Lhv+058zC12XUum+jNnorJ\n+zds\r\n=Xvy7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAYemYzJruv1wCAIN8lFLHGYKpZxb0FUlLQpxjQR57nwIhALU8MxXm3oJAfJXDK/iY1kRYXm4TmfjblPtH0gxRBish"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.a3ff615f.0_1620081201676_0.11302836283888484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.948ccfb5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/snackbar":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.474836ad0.0","@material/rtl":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sp/1PSRsK2BB8vX4QD0PCJ7a4RW9pq/VrZM4YaGY+RDqI++AFDd0ZRcIhdvM24DK9RQiRtj/K06LuJ4VfZScaQ==","shasum":"fe2836222f7a236c571823c7a7db28c1279c2046","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.948ccfb5.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJDvCRA9TVsSAnZWagAAit4P/idoUFl/YG1zywc4IBa3\nkne83nPNl2Np8HCL46vtK64+Vtjv3h6K50vSqHI41NTCEX2y4ki8wWWcsmyC\nPEtOkTSsd4+gcm6RbBakTXTdcwNh+mMhDfR0hXLy+nP//1QsG8n/BxD7fT8L\ngKFBAqXYztAimdx3XruRvdqaOHEGQf7z6PFAjZ2Qh4SvmJskRwaUlldRLvpd\n1EKZP8NvOAnV8eovhP6BKNPNpNv+1AKUHDlYQb4+BLFiX4Kj9WRprYgBprn0\ncuj4xA8oVeW/npOTcj1zEZgYBuA3HNQhixLdnmph4mfY6rbclb9Q050dbn9J\nWGsFm4lWVvCb/dDeZkYQxud+UvNeKLSao6W+INWg79RJwmkOZ+MhdUz4lwxN\npj166dDmOzUQX1hhfTtaH35UBR3tK1VavlYqq0jdr3tUqQzmTmIVggTDy6Bz\nljLzxpHe2pMCHWNdmtSsZa5IRiuvQRDs1PuDg8X4WXUgoFwmNL6Mm7aotDfQ\nmp2cbzmpKbM7rA6jnQ3iygmtWTaZd0ByvJMAKpNdmsmWQ8eW+1Al1n6OEwPU\nikVrP45T6qsAbQplqprjtXvc7mABPvxkhbHP6pT3PiG49BhpjVeSYpjIyR4u\nkl/JTW1+1wEgk6csnHSACEXUtZsAQcLER+pXdJFCEVGQ5I3PpS1H0Wt10RLv\npa+Q\r\n=YUCw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwTffoYKA85IZGSW7TL2Plsfe/rFfEBh0JJQFCsK286wIgAaRStAfhTKTrnKslHhjrU1rqqriFhmA+P21ZkWTaMtg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.948ccfb5.0_1620087023395_0.9302978781851552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.9f8337d7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/snackbar":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.be999eb08.0","@material/rtl":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UJnQHy140VOv05s59o+EQmMYxLkxvdmL4F28jDZUXh59HAZyC0MMzY4BNk7F/81i/lm3J82Nxaj4+uuQ2I4C+A==","shasum":"eb8e4288c3b9385d76c80f12ac3a96eebfa0b096","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.9f8337d7.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZQ4CRA9TVsSAnZWagAADx0QAIhBvDhOO5XFUsqxbIqP\nx0a3v7z73CKphXflSawHpUAgQaRbGU/YeZpxj107dXNGwUIf+0XNrpRlvufN\noV2Wk83jYLTVEnTdxzbX/UsE6X+0B28K7TvbynFaAIuzCRHMer5HQxvvSWKx\n0zIwKNKdNdzBsx+nU4T5OHuOcIzpfajGSyKD5/QFFbDYqvIWPlXKJ3dlO7Li\nsKZTMomvfqfjTNw9YOF3CH/ymdMybC3uzpyqUuGKpjAHoYdRU1HEk8kQuYfC\n/RfMbrG1xTxSVeVeeG7dEMRPoRy/v+bDZYo2kPv41N3NdqUVreQZUvunLPaL\n1mPYK0FrB5kPzDut6LA8QxAezxvfOXc/8Quez6tXIb6cRHD0WMIIiRuyJnJn\n80ZvMebOuzkmePPQZyWWM82OS4hg44wfjbKPLGDLFzGuVMSAnR8aRVfj+gKM\nAIc12Y6BTBk6J/NuD7RExGUliphTWklomTfWLGrgoXrYuAKTV8ezE0JonqGo\neRzswwaei18Qha67oHS8fYU9i/mTeC7EoMaFXhEfa9BmUur1gioCP6gp69AW\ndgnzGMjVcScYqqZGI8kWQ31vtKCnvMJYmjM1LnV54IOH2hYoSELt2Gd94qLK\nZJwg/IgME6CHXxCBx4lZW5621KQcDrsdFtt4cLzR7WlYCVn/oAysGAAeZbNi\nvOF5\r\n=fM8B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1KeIJbpq/kNw3pIbw46A/qbQXyvXSl0+vu8WE8pochgIgHbD+YZSKcc9/Jh5t8YIMcj5loer+iH05+gR79Z27gXw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.9f8337d7.0_1620153399933_0.9509892045330464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.5813480a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/snackbar":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.055d4f10a.0","@material/rtl":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MFHqWhaEU6WzVSrXoeDFky1yxEuQxsIyl1bTAsyYVu0pwbNTU4wLnyJV5pNjllOVeEos1B3IjWzHUyyTUPO/Rg==","shasum":"44d86a23f6ed3527ae0360e617c8190e7e5a8a30","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.5813480a.0.tgz","fileCount":16,"unpackedSize":67630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMCCRA9TVsSAnZWagAAAMEP/iF1WMXTOVqh/dy7/5K6\ndzyeP0v4UoVeNvK/Oz0wDjJBGOdLTYyC+irOV2v38u4QSGsoXxlSKZbNT6qB\nJg9vchp3aD4Uq/AyfzUn00sPcwd4CtjafvYZfq/J6YPaF/u/lrafikEWNgDe\nBhK+jEEPqi6xI4PnaD2bvZd5uBmxbFKPvsILCW59UtHPYp/yrKX2OZbXKIeo\nIq22nwFWssl7D6s3eWqD6CJEbxlarQRgk/sp9dKRt8N6uorK/jRPjKWwq6AO\nhPKXeC6nbe4O/GYOxKixqSKj43FoUPqmZ2dVuy+rzrr/0HCHnLG0ecr5Uy0N\nr1ffcooeOYyN5+foKEEcS5Y3+H1iXtNM53TFewIbe9xND/eIJi7lpSGIRYRX\nhim2HDR18opkKXOBQea7M74jNRLTYew0lUcw05vLlcpp+c5lBd5YfhyZGfmF\nGnP9bVwunGZC4CmbbKbXG+U5bU3JabnL2USKfOe3sFvlcLZ+PjTqbqWgcxtN\ngsZgvVm5VYsfSY6zpnVfVIA2BuFeWCM1BrM8MFAqxiesoUa2DnvdknZ72H5Y\n0G0eQFgKStzsCTgOb4YH/hhk7vRU8C4MJD6L/Fn3Sctd5RgHPuMIjNWrx8nC\nJT9lXQS3XF9jFQEnlpAwcryvekVviLS3si5+Y701uEIlVjYNK2RzVWih95We\nOIZJ\r\n=LNKm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpjAsC40zPovRB73voGzAPxkqgVkc/9aBWLL6Cbhz9GgIgbuts19dcVcgNQkwi45En6ouSW271TT6if7p9gjeiGo4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.5813480a.0_1620239105621_0.2447069404745994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/snackbar":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.03f525f9f.0","@material/rtl":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DsenrmC+TZeyAGUoORW4/ZJikQXTfc5Scow3DNyz23B4DbT2djoDg4POXuO6wNNMn7nZXB9mFcGuT8Xf1i6/xg==","shasum":"3c1a7dc3af8d36634277725e7ce4c94b15a465ab","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":16,"unpackedSize":68030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5dCRA9TVsSAnZWagAAe8YP/jSXN9IjyFmvwLpnC4eA\nBnrfEzGDs8NQw/f6N9GEUz4zqusDTevtCL+IPkBQdMwe28AndqDtlylJ6d0V\nrAcbHHmp7jJDj7NPZ7E1/t7iTUt5PEtsvtPZZlrJNApNvq2dJO75NqqoU8Zq\nuKi/DQJ1U2FnGIBMvAUwePIzb9QiCrUg5U7prESv+YDrjclMvqooR+q4VOA7\nfI/TXsEP87SmOBIwHmPGfJUAdbL0JFkGTcWMbCMI0t7dZsRUhRssm24WEfJZ\n47jfQNytjtAy3rNPIMkwOCvXFcG6Dl+gQOaHMxuyQ6rFKybnJ9nz+pnIwuWZ\naBvkTUD36AscVHqk7CfOKEtj2xR033Rdfh9zdX7uZjy1CoHMZy2eYKLh4TOi\noBCNO8O/lAwbORR+YuTzmSCxo2Vf175QJP/XLv0z/mMxQgbjfHW/GQpG6FHE\nPhliHA6UQQgsSqxmow32oQcx4jPNu7/huJ1tWbZaEKCipgHmwFsZ/WPj/HV4\nkP/14qA4iFqJHFk4jRlvRQIkC9A7NU1dWylFC5WR0/fy+2PHk+Z+Wa2+3lye\nIjJL11/CiCumg23NLwf+EMv3rXssnLAgnKuxEz3VQYriWZKS/+NXEG1p5Cim\nbn2i/EYbHX01j0YpV0R8eYn0SzGKLRrdKRHOaNsQ3NhgY9RZcTHsBrMRvOF4\nnM9/\r\n=Xzb3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDshLbU0CORSE+EegTYdVTRSqTWSgIiD9G4KdCIPm3OMAIhAPfkaiqQlAezReqitjMFiErb/j4/5bnitSYQd0OIykmh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.ab7fc1bf.0_1620323933154_0.6622849175429504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.25693d60.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/snackbar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IaThZmlGCjTTm6ns2YBoFVHjx2PPWBsITFUn08H4rHnWHC7warhv4ddqY6erMvfzICtXNN8L/bdO63mwVYh/dg==","shasum":"5153d6587d7befd8fd86b9c3096b95772cea7d81","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.25693d60.0.tgz","fileCount":16,"unpackedSize":68026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdcCRA9TVsSAnZWagAAaL4P/ifSLDK30oelW5QbkH5q\noIg28295AaLjCZXAcKp50oKG5Y/zaaHSOT9kwJHnehNNhwR2lmCE3QgnTJII\nk5mKK2ypa8yk3l1z/RuA4nDmr5pqMYbgllPYrYThSUFNhnDIv0sPouHmhPCi\n3Zw3HqnETLUVPzJzrubDiDLzJf7Nv+rLaIeNHXKr3KPv/YmBdZO613fHmnXd\n8mgAynHHSX9JFPqrQ5WfO16o4dmNEec+te4VM0XQzgxO508WQCZFUoGTJF7O\nN67n/rxecNjmabhJdGX7U6fHNNHLOdxmduRBMIQjHz04JOa3YKOBPeTBO15c\njKpOPgc0eStXyVxjJ486/aCPFuK/erc1nc+5mzDUfmkoiPWk9L6J0GP0pxFd\nlghOkyKFugUyOllLl0lNVmRG0aZZ6SDENA8P9o/WygAnRLGIVj8YQ7Pc/2Lc\n58C7tVP8tevbLf5v03Bm0AUcFPJY7g+tb2UEtDsnIRoEgd2xjEE5cc33sGce\nCr3y8QDMmsO2IVtr4epbQoI+kTihhZpStSDxHYFcR4tKYmmWxJ//4Q4+0sHz\nGyGbIQi80KX4NaYOFm/6hKaOHAfpXOip4w+62CWnvhf82wdLhGX/xUrnlUYR\nTl91w4XeAFXuSou5/VKvMUhgrLUY336AJg7GFmvwE68daxclCrJaDbhdS8tb\nfre/\r\n=+Vzv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVVL9c4LJxifBMury9DT16g4PLNzpjqgJhCcbaVgpm+AiEA9WsRtTKg1jzbj6UhdWPqUvtVz4BZB3x5/e4W4MT+omg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.25693d60.0_1620424540566_0.32710562234494134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.c497962b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/snackbar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kQleTCGOei0F4jGEb5lOkkH43Mll77y7LLq4ikTCjKhudL59OExQ3x0qRBU/ib1Gk4kzHbkcDrsDYll1NL3Pww==","shasum":"d920880df33145d24c642cd9225b247e6cd6f180","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.c497962b.0.tgz","fileCount":16,"unpackedSize":68026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbz3CRA9TVsSAnZWagAAdLMQAKGMpj6L10p/TRBdSAif\n/yN5fyazn0YQWimaBsT9aWpEpH0hZ4c+ZBmUTo5CFzp38kjjogbwnHILxLlm\nDTlGsQLjq92oA8L0w+hfHUyPXAq/KGO8/7t+vMAnLsS8U8fs2kxd3yJRrszR\n9k1duAV8fjxtlVRqda6MX3h0EEEO3Uuf1kXnSQ32QfE/jcQYZJtfuK4XCzBZ\npOl+i0EmkEGIF4oL9XDj4wIjromb+T4AK34LEK1SKUv3wuXoa4xyVeIR1ned\nPnL9x6VXYApx+Sx8Sx9Lv7ni0gUvQF9qfOduCBWxRfbMoMYXmiI37xseigFv\n84CYYg9ZTSDhKStv05u+8hSef4HNWpD0HpAiFwt5Em+yiGZquxLsJ4YDRiPU\nqWSjZkZ9mu//ndxD9fW4zJ4uxuE5lnQAWbfmQz2SL0mSD7KN6YMXec1zsf/K\nD7VJfbbIRSkacdzLgLZDYW0h+1fnL1SojRM4Owfdoj8T8nGuDHG/ADh7j/hj\nJzEnxZEEZz0gDGK6L2IY36ux0YgMahoAJioM9rYx7Rl27hme+34BQgyo439S\n8zwKhDhmmC8BNFWQAlRSfYKOSrQVhZ2Zz2Q6RiO2hO+Fqh5aoVVEmNug8Iow\nwIDbDAHYLu2qwSku8we+z0BvaMVdm0q+Wjt9SY9KYH63K1b7Ffdk7DD6JfF+\nD5cK\r\n=LiPS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHyLWnRxnRLMIoK3tsoDNRtMYLqrg5fWa9WPyFPMu3qkCIENvi27GNz8zh+cjl7LyG/3AtZ+3M5LuiDWAD4Vd98Uq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.c497962b.0_1620425975385_0.11668680091086636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.e300688e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/snackbar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UDhcUY9r6b5/poSc3l75sIBs/BzwkdJJ4+2dAQZrhB7DFTy4bcAN8QImWuX7i9QQNhUX66vBPZXo8lGU5W4MKQ==","shasum":"30528b2a4143cd3ee2956d90085017d6f74aebcb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.e300688e.0.tgz","fileCount":16,"unpackedSize":68026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4DCRA9TVsSAnZWagAAymUP/iKuFZv03NRpHJRqvNdy\ngEdHeBQCT4zwLwvTlDSRvmKtQRki25UXP6wouva6sOg9LtgPQ5EE3GPf9vs9\nAgc6TUYR5wmnzHgy5PIPoY1QxoZ4fy9Hz0fVevcVuOz1SVbWQbTpKmdEyT7F\nat6eB5NonclHs8GjWAO9Is7dCiAP+MXuYAWiCPc8D2GX+TCL1Nmn98yFCjOV\nyZiPK0PLjoJTUDX5ijo7QMpeoZGudWzTObjtCWrlxDiLm8xX09OP6mwZ97zB\n30mlJdFPuzdQOH4+9oLCxlcZO+Oz+WCwd9MgI4faLkWgGn+RX2WDoOXN5eGp\nS71K7/QUFvDm75Ta+mQ9FlO7wDcIHXwpHb4si+mnOuzTQeFG4dKq/qMRzB1s\nkEsueeL6HmD3vW2PLuwvX0OsexgzZZ/bjhE7VuSEjotWwbtf0J/Dsd+CgdP3\nrlvltDE9P1aCo6PEHhKEOHBCGy4BI7Z+4Z4nXcKUoGKmRQiK5j+AQ0FZLQji\ntlTQFYvEeXif19uEOt9HJbmYnyIcid0wbwgZ9H6nSxa0Hv/GHESwg6cgbp42\n9GgwNPdPs3wanluNh7c80Rz6g/sV14O09mJgKlC9a0vqPSxmu3iNDCs0Hqzy\nwvHJ41+eeIqTgCIwyWMCKmT/XX0Riib3L93uncU2QSDNLyVfVZjFiLp0v6oE\nfZxm\r\n=dlol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE80WnPbNiUTjz4G1h02NbXbAXYdJKjysuXRUAi+eQSvAiEA1bdvXfwlEvkfubY1nxtZ9S98X+RGJUosr/9qtflWs/8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.e300688e.0_1620426242659_0.8283147337226526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.d70287f2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/snackbar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZfvQA+wUn2qzxktki+fW12CPv15lBznFkOsZuvJeq1tWjzU5lQ8vxrQnTBZbs7o16Jatco+2/XGw8vYldcZUVA==","shasum":"16f65e6eaf3d2e8a7a4a564fd28ad9622623ac68","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.d70287f2.0.tgz","fileCount":16,"unpackedSize":68026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYl4CRA9TVsSAnZWagAArewP/io8rdt+7zAtR8zNTekP\nrjSPHl7Uc4EO3kJkHXSykX6LN0YBGBt9V9oQaZkwwquDiOeQy9TEbwpdxBSf\nrIwVMDtwekDvderzODErC+ytTwibFZB2GqhXlRexlD9qCFFalV0lGC3tci1Z\ntERbsKsYDIcp2LR+oOorQ8IA5YJMBtjKau0F9cXyNAPdGpfQRJYJSrOgg/e1\nkfPxDhY6d6fjaZ0r9M5sXeCEJ3iLqeNbWfQnPAiJGqPje1+n6ANe43fPdoPr\nhRT/scMPMlOXYrEcL3UudmnqP3x01R6q8P2vjdjbR+DIQ3I6uEfdixrjaVTo\nP1gH+CaZ1eC3GRk+fOkstXswBapKmp4Oife5wpaqaks5u9nP5lCVqRYLxFQU\nMAePeyfchO/Mz4JbnzMFPO5UqT8tgLjh4L5U0qq8bnio7ujL/rxR0WaIiOwW\nPIl5jrbKBOj8xcIUzFizWoheWncDZsd+vJgzjs6dtij8zB8e7LQcVub1Z48l\nYLon7zPSOUtga5DsHOzp3k7NL2UCGTdmuHTRKqdY38KhkOcWi39xqSt9IFnZ\nPmFre22FyAjZtG3VPGzxoQSvGMW4m7EZJY+uK0dEtg9os0y2upSQBDA0H7+g\nb1iFrsrLOPb+2lXH3s2utW5t8wH74KXqkplDUl23ZJrdKwjN2NicAlAgKfn8\njQe7\r\n=Xjqb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHE1et974xRbAzVKqpf8jy3qsfkfHbj6dqtTo7O7DAOCAiEAi2ONBNOzVD6w7B/sMK98D1kOBgDhIvnqrT4Rl2Gw8po="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.d70287f2.0_1620674935968_0.5690213113000397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.02e841b2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/snackbar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.869d890d4.0","@material/rtl":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4QyNfa1K2a0xqhnxViKRr5rOwINf5h2Q8sIPZfgW4DZGy5F4XkdMA8d2RDg+X/INLttnWjmcwThTlwT1BoOp7A==","shasum":"d20080bd60c98063ac4c15809b59df3a54612b35","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.02e841b2.0.tgz","fileCount":16,"unpackedSize":68329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjFCRA9TVsSAnZWagAAjEQQAJhX+m0w2oIc22c1YRoT\nBkfcjbumb0go50dQ+CVm/R+DB3jYK2OpORJhKZlOdB1sv5qy8CEAdxjJ8O7t\njjFgiN0cCQmxmm+klK359dwhojfx9/gvo9ujX7g3gicD5+iLit5LjpnwpsgX\nsPLeqvsy5Bd7+x0HH3X2YOashU9hhfLJ10zn8HwGHjd8nNKploURTb7+ZIun\nJF8YoCVV1VmHXA/ME4qHLxEK4ynqRGghZFQaD+cksAXoz1aX0xZlzO0Cwq9c\ndSwEn1utWfzxgaj+mXxpVR8tEtONliemjLHxz3ZANrG6FVlQlv9tRNaE6BEl\nHLHIsTKKDaW7/MrDyn8SCwO+2lEAXiC1+vx4/kMt+GyvjClf3r073C+WYrw0\nE65clm/U9f1iYJjScjW7Zd7CK2OMcu/xdnwbWWyDoGKr3Mvrz3txBSuBrvT+\nJ4EzjL4BY/rDGTcf3rKfGOZ5cT9cXNmmvb+18ekJnYjfQvgUte5r/wTOeI27\n50sf+PQkfkHluUL3GWXqK6hkxd0nkjDjsxOQFF+e6CjpHBig9f796VuotKw5\nfCmFxWwGTEmruiIFhvM8zKnPQXzU3QRSdFgqN3adZHpS2ZizfLaokSSf91Bj\nh+fhzkJJ+QjcycqRpe500gTqu3D/qI3Fm4kgJnrTrHkK7Dh5zth5W2dRdnXh\nRYqx\r\n=KxJx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFl3jNP7OV96lGNoIFC4Yul7e+KeHZz2MlTy4ZZ+Svd8AiAT/iM95H9P2RpCE7HFK0XpQtBPYBQ+t5V+I9JwSXuIBg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.02e841b2.0_1620678852955_0.13061040102420218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.badda2f0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/snackbar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pW5LnkkHe8cDwxWyXEH6I6ZkXyGfA4w8bjtpDRFJb1WnXaUj+hkdB5M7SVvmQloShjhEBCclF6hUu97ZjIrCxQ==","shasum":"510b3c2292c279a5ec3e9814c7ec70a52fc87afc","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.badda2f0.0.tgz","fileCount":16,"unpackedSize":68329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEMCRA9TVsSAnZWagAAq00P/j20ZoMtwSWRQBOtkBye\ndBai+QHLpP+SihA93eJNTB7OaD2yEW+vG5crGbewz5upNOARso3lT5pCQT+T\n72ajvMms75ALFZqXrckSxcEFVcbRI3fl9DY8rpnlq4FSafH0vIFQRXjIepjx\n/BKHb03JPnhwn29IRvh08v0CaAmZhNwzMa/H24s3OT08sn3Vtr2Up/POKMbm\nxkPfpjFa2mHEHdeJVeuXSJJWVoDGHK5c0ug9SdDji2PZzCi8pJoCbaNwOhow\n9sfVY/TGp61S26dqZB5Hm52dtTe7SpoxhGEWOVYgk47PWQuTgZ7Ow8M77f1l\n8GXB8OlaXxmycejxsu0GqUHR6C4gc6K4LH2fE6haXkRj0Q0dNrb0uhrVDxM7\n588uxsEL7mRKgnNFKhDWDBU12hvIEyNX8YXxl6nwquC4+rtCeYeIZ4hjiLzy\nE31RCVUQIW5EUipjdF9WWhqEqhYrAUggLMRmY3uPSf4YPkLClZhSoT083nlh\nEwi4T5ZGy0VCNTBll/4Kig/PPINsSfRtBXG/K8t6Hv5LZSxgB/7u6ZJC/KdB\nkyhMeVLBsSvfpnkqgNnzNtz3FcyMZ9qpLr/QVcWSoUqZR+0AdQM356HOoBJr\njTLox7Ra8ZqrAP1mG05zSEetHn5XBCjUOd002X3cI5TQTGL5hjDYNGApF6OL\na3FQ\r\n=jw4g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGF8Qy8Zqa84tunLELCOLz0usUpFnlrzC82NEq67zkaGAiB47YIS6Wyt5QFREKVwoGtZGrcGMvYcOdJ383+H5vYxIA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.badda2f0.0_1620693260100_0.4341391978303728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.004aca62.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/snackbar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ndnRAfnYlvKKHeM3Q1y6yzt1sYhu9LSRVK5y41NRJ2dRf5y78hXv47mKcwSQ/v31g9mP3J+AVunVcQOqsYOt6g==","shasum":"3de86cb056fee3cb4f40e6c2d526f5e9ef952b44","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.004aca62.0.tgz","fileCount":16,"unpackedSize":68329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseKCRA9TVsSAnZWagAABkgP/iDMHh8aUmM+mEylgquv\nN+/ytGn7bWRo0BJd5GRH3g3yIpTYx8dk8p+qInhPuJq75G7DZI2gHxh6c4eW\nEzjiyERazuTGONfXkeyxPHkkx16Yrm4OQ5Oh7+N8nkHUt+LtYuJHK9a251hy\n/Dws6szNhk3hKTxn+g70PNvFr7hEkdY+MjzLH9rg+NkXiAP4kHLfJRNPpDPk\nLkJ05xdAt116WwnBvMw5QRGvQF51tRlxmLMJvMSok8tVou89eMkbM0welZto\nkLTl5T1+c6yD39juiIrBNH8OGf3IFwCnibU/c0dEl/X1jP1AqXevA/kBRqxW\nMExQ8n1T6jJG8oE4hJ6QuOGpOM38boqS90wB4IGZsx1Bzo2HOYTjQQXCYfe7\n+4Cn4I2CIexHYX/h90UIjC5QPoekWsm4ULsYf/dzmeOem7lQbkNJfsXCaWh/\ngpw6JhdYK52uxQRQle1j3TMwQm8ptuFnz5HCzpgJYY44w2dDlv2bfCxTs5Oz\nsufC29uZk7IhC3MoeO8G36WRkVvQtrOM75PtW6RJ6tBFbo/FgQYyEiCNed1F\n5wGdITR5GGWtjmCmuNKyfB/KZXiN3Fs6V0VAKID7tLVtDc45l+4BTPzPHr1Y\n8Zqn4PiND+xMcDUT3aCK4whA2u2km6seWhf7jUbNyRonYcYcWSzzBu5fg7Xo\njIoc\r\n=6khD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAbvIrkTzZ+v3BauK02JkcCPsSjk63d20t8+qkVfX0cAiACcV6DAc+QcS9qYlSOsEyiOWUxOD2hMQKCNovtQVBVFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.004aca62.0_1620756362241_0.7162372196575217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.4af17446.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/snackbar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yWVtFK0/039fge4MBM3vEUtvkqU0q3N1wLizYwZZ30Zy8sfoWzccsxBhxSEOGmApA1t2m4w4EjocDCv/m61ejA==","shasum":"6c4d8c4c247e40548bd62448dc7f25e95b69fdab","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.4af17446.0.tgz","fileCount":16,"unpackedSize":68329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDdCRA9TVsSAnZWagAAHOwP/2QQuXRwDFSRd3KJjoXC\nHPXg0wyX5zVOZksxpD3yJ+kK8e5TwQ/TY3q4L9goD/PWVmkq03wVIjGUxTrk\n2LfyRrXexb1udb74D04O5uulexmVGqX2QmU+3XBS+L6Lg0JzTm8QRperUCob\nFIgHau9hj/pp16M95eDbN9KcbTVU8/C4Tyoaz4GUPi7VpkHGkIgIqX93jy/l\nuZlGcFLiU9YHiudzI/LmlgUi8t0zLnMr74AKxntPRSXIKHlZq6r2JCF+p0Ne\n2y04HIywbUINcEQev/dQtk0xOAab9hIwXtSaObNddi+gL8DEqLNxLNprQi6G\n4v2SC08XAG/JpK+BrAfNnrL1ZPasgoQw81M4SkK3fHk+6gxey+IOqkMWv/+4\n012H513+SSxXbhOkRrS5MHd496uycMS6C+sYAxwGLU3BmWB1lyL3Uw40uiWc\nbVCkIkpNq37nQ6m+XI83JloOouFDal5WWgtuW0nNWC2ePtbsHSLbOLPz+CWr\nxRObFOBP+VlnGjBXTnd/dwfBam3xGGULgfcZ4L01wHrM/0D4yNuaK3L7SiNQ\nyz4CUCETaYqyGFihLdSGr0KyxrGuc27mTY4xGwmjligriD0pkXbWvVco5QlI\n5XOTy92QvQ1JzZFrQ2aK5SFz6tEXvaHUcdHEBw8ZIfWCRttOQiDnD0fDK1z6\nZ3oG\r\n=DNgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHM7AUctohIEqdynSDuSgEPsuzBHliTm3pVtx5Xh551eAiEA2HlwxlS693r5q1DIelyQkbAovEB7WwvOQRy34hHjVCw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.4af17446.0_1620758749491_0.9087640874106253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b94d7187.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/snackbar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Uhn5qfBVcWfVI/vnEpsAYy3vGnGKY5njyOiXht+MQsJD40IIN7pifRuy6wQAe+FEp0uS2IJvAM4WMwOWuQkavQ==","shasum":"cc0a0de1307ad6472bfeaae0e6cbd8fa1e9085ab","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b94d7187.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtIqCRA9TVsSAnZWagAAb14P/1ZNeYO6lXnhm27N+wQ0\nBHkv9BOfZe9wrHB72QrmSumr5BVxhXarN7ewp9ubjX4jM16gzGwcF+LdfgEG\nyVx6tscOxeXm+FrG1XmsrE5LSJjBBCoi+BJXe1mtVVyeVtdZNcNhiGNcIBFG\nCrhauFXvP2vS+OMRgNgCGjRdgI53p3f5B2UU81OSNndo8vbCmWKDyzqN8weX\nPq5OOaQAu4MmwXqIthPNzwgUzx6eK2fe+pbpRIwADXEK3ibAHCFR6GpKpYx4\nm5q6mKh/gnlwYRwkorc5KBys6IftCRMQuYp9wIzEotDw1OYbhvoVqOh5iNNv\nrr9dFaW5187Wmz3GJ00vYzzl3BCFgm9mFzSS8AjNVgk1eHlAcKanTxr/y3Vw\nKJdTPXKX0SXgldCxE5qVHC/5UAG77WUwq9/4UHYf4lf+S9FjpctfF8+3M2fu\nTtA3rSUA674TYFjvW0irizHwrTjHSp3BSXwGZwQSgpkAy7eCiIH6E/vLl++i\nyjqO4fOmqsaYY0O2H+ts5i1UymXJ0Y+2JtMRq7vVz+btPx9RowBnlEPjdjoe\na98GQrq9e01yfR9I2oeQ8XJg0J4PmEZVnxkOmj3dUR+LTMQP281ZLU5Zjh8f\nN7MKMoUhVv7XchEwTQ7lRMvzm76PhY7N7V20XKye8Jdl0VgQ6t6EBpbemEPi\nbPk4\r\n=BNSc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBJ0plrqjrbvIyE+QplYyUqViB5VoXXtboA5nMrIq0UQIhAJCnEo+JZ1IfQVUKUUTuzTS8w7dW/Ya7w4tDfuvUk3zB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b94d7187.0_1620759082282_0.9255220963416739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.4021b2f9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/snackbar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/HABmqFuQIRqbAN/bv/GCQmtZH1/Ps30KJkVpPZLja3LF51zhBtLZ4DiPbaZ7P8HMIYC9sGYzUnMW5p3GhUE9Q==","shasum":"29891103648e7e24f8987af1acb9a8bc2844a652","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.4021b2f9.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE/uCRA9TVsSAnZWagAAR+IQAJgXcaTn9ylJ5U6iWKXD\nkhMX2BrI0XllSau3Ly4Aj9Z7genxa1DwtGdKSIHfWT90P5KjvzMAyfTY6sX1\nr2Kh990b/aQs/XTjPTNhb9nRL18xmpEdVxNOZ1z/GPKaZ9rQ7fIvsHG1dnx7\nY66XT8E5OGQf3zqVIRUfj4S3vc0Y9A4rCGooxu4mcJtru4inB+xSHeJUwPVV\nU5LhLDZzNpSj669CrR3bU2LnEvsjbMRdNfZGKDVboILd+8BpDecW0QGMLFWv\n7NaXPLoNCMSVx98M+D9leA5fCvxkNtKyC+FoQtRbHTngjdi5M/N/3YO0oRZE\n//aVv2Hy1Gmopl8J4fJQk0zcUiVwzYdYyoo9RTy7ML2RXI+vQm6HPpkx5CYu\nIJfL9iSx6M+frYc0w4e3T1mQk4g0yXF0BoDAPLAXIIDaq0QHhExoTJ5TI4lj\nblO/fTYuU98F7wxVeaNee3kBS5W25Y3dZenO4CN6R4xNTAZobDn3mvS+74KX\nOwk4OCUGGN9NLgpZN729uACW992WUGnx2QuAPqT5+YB9A681NIxU0AzRaCAk\nIjqdGPjiPxqw3gbStnhZr9YTGQhMPTc2eRzDknTwPigkwM/94aquav/uKIyj\ne9HwtoPC8LT1sQ9Rgz9mIWv/9bcob5KlIu3La5KVMmO+Dwe9xehwBxsUUfar\npy8H\r\n=gRGl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAevdeb5sxqCcQzMFfTq4IjjJk8z97xyQSyIE30WoS18AiBH3wAV0R+9EzvJQg2jF+WqaR2XzJivuCFBR03D8WAytw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.4021b2f9.0_1620856813563_0.9407670699809572"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.6a5956a3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/snackbar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-V2G5mL4Igi+eDnr28VZAspS/D17aoeoA2A62SogOMtWNIKk4OWDvQWGzYbkMIXC0ok/9bF30E93MXtDlwwBltA==","shasum":"cde17d27f32b8ceff648096360ad9068a62704f4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.6a5956a3.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPjCRA9TVsSAnZWagAA4VIP/jDQhcKpSitDO2Juz+UV\nG5+8p7eePhtraCS4nlVZI1fP69KkyW4c5+am7fKrICQQLGSm8tpm54oOOgi3\nWHGAfvr/swBn9RBXVZdlOmwRM85aEqP5uhpqoj6AGwgcq+GkxaT9BpJ3guwb\nFMLlILMAuzQojuz2WK2qICp/eHmbB3XLnsERT5NZAvW9r7+/ep6jo9vQIkmC\ni6FmKYTS4H4OE+12l3uqwkO2B2j7UtPQC7YC+dMDiCyZb3G6depPnWJjIa/K\nZ9Gr888Zuu/3aR2reW7gz8qARfTJf0nc6WH1q0fvusrDQ/7aoFZo2Y3/uowl\nNyQ20DLIbfLhCHlDwB/QMZte1i3YF55bLU+zwjEOQ7So3pgHqz3zg3xn+cfh\n1NBWVyotNRoHKlKaOK4hY0l3yxX7rF4LZoa+gidXQTscwdlBeKVWZxH5LJvW\ne+Xg57rlCQt+XddjAEyK5V0DsKyrfm93aKSYwl9qTYjJIkhYghq8ABTzh1gk\nSWOd2pj4iEu2r6org7F/NEoHdFiuJcBk/asVc+bcRDhGMVMH06sEAIX/n8qs\nQXHNUENoakYZa6Rgn95BLmW8XhWGAlWNcFDbGd45WJHNAM7cS3o5tuz+AQuQ\n5XqPKINkYzG1g/Z6O655LGjkK2U9mHUZT3nUKA8FqSwdq0k/1+TBxpnQbKFr\nQ8lW\r\n=Wum2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjUfVqWiwY8If7gU30L6lL3M+pFKbhRE0TEHzDGdaGJAiBV/VVJ5bKeoSQCmuB+2pXDI6ofDIyP8L+cEhhuJgIcGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.6a5956a3.0_1620857827206_0.3929986295737362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/snackbar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8SnONIaZOEuvlZTaQ6jRXzNqHRHBVxJUzVIRnAjI7tVmcBCODR36lbZSxm94kcr9nAIk1Ba45K4puHxJtKSyzw==","shasum":"489e3a2007f9f0f99e522429ab40fd924fb15185","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b6e8a74b.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6tCRA9TVsSAnZWagAAqvMQAIihD79LzwiPDHKfxc6r\nKaXjyldiNNGsrauN23gCjV/Vh8C/MZdDYk1vXz162ft2ZwUMd0Ia528nktKx\nrmlq64tjx3nWYLqet4wBZ1rrM+YO5k8Pv3/fB0u6DL8nqByopXWXNrvG3cc4\nTpRuFo39yMTov06Fzg19PqLyIA2RD+s2PuPgRe+5yXkSb1SXxetPjSUAjevR\nNFHZYGSyCBF6YGccwGkps5UtOYj/NBodEr7D2yXpO9b80iAjhRsIbnnvmXtF\neZMXWChApsoNKPXCCZZ40CfJ5950Z2MT7dS1JoN/G2fVS5iAsI6dyHLU8HXc\naIL1d6HQEhg7mvdGBIGHZ83/WZKgWnOISyah8iBIRAMJgDPVn5HB1/E2UPxm\noRTvxF/Br0Xg5eNNJ1u+cGJh+dBaQzmO3NSQ02XZg5ADCMudu49a/zVcX9vq\n41zGy7jyCE6Oa7GcDK/45o0hcQdJqoAIp+jBIg704YSPLLEiUfnxSjlkxDlG\nAukI7JtS+tFTdEUgy36Do8kCbtQqRFsXQkXG3tzayCMYliye6hroIso0sAmn\nH2GO3FqOmAbw0zOPq1OUo6zygERWvkCvDgieMKFmbs2fJX1a2yVznxe3q23G\nW6m8qOq6nV3Vbq4whNaNUAofGHHt9fsYiunYZvCt/oL+9FggenQbJQzvDLno\nFFXg\r\n=r4Cb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAhtZXJTvcxZ0gbESUgaY7YrYksghOyudBmpgpIdMHhAiAAnSFCBrOfkTR2xa/NNmDaXTpaTsuMnlhLC3L4l9f1Xg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b6e8a74b.0_1620860589005_0.14115074416418594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.c94e1030.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/snackbar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PLVWTi5+nSmuqpV54g1hbD79yzEUjixpt/V4UAj/BvaZP0x3sGyML+QZBJH0j/7jsdathHMDj8oJXgcyhdiw2Q==","shasum":"1b71c0cd83b7c60c37f22ac39f9c68c0fa317d8a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.c94e1030.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAKCRA9TVsSAnZWagAAx0MP/2DBFKwXbe/tZIYsuTD8\n9zi7K/oJk4ozjwa0IzAsPHWss5gE4BdCyKdjhHFTvW6GZq9wAj/lCmeg5r4z\nx36ol87uOOfsrvauEc+vQih9HEdPVHe3NHHCCSMsiC6zuf8DWnn7znDUAzCy\nNFDADWnHFFPd1hGQcC2kX+dbaGfcU2W2SPEV2+aZENRI1bffNxgYEn3wartS\neYEOys156Zqg8D/IElqLp7EVCSfDCr5JfUR8UUahboAkp4u9X8XWsBkL+CDJ\nuB8hPPNeyhb+dAqWF84ghmIn1O3QkgmK/K6m5fJLwrxgjEF01pAuF/u7NxDE\nn2oMuCvvFO56k5KtAmj15gHnFmYXLjoJGVIxd1Q93zxHUSLGKr4e3mrwsFLx\nmM4zmWmu54eDNJGJ9oGwKCi2EiL/MwIuzBYMraL68y7ttaaiL/SQ3yvocYDW\nXMIyYUFOR3JwWI2hRcU9pgEenZVzQbKkhYA6lJztthzn1MXSN1o68Vqiflka\nwXsiJXgbzgurzrNdIdHXxTWfSny3ke9fioX3ggBoUgz+CBVGEAqw93aFQbMz\nvwVS5zz4sDhgGT72xrPeCGBhYGxiZl/szjmdxlPu1l58ZfybsSN7/kCbnNDf\n2t7AisW25jvSgoe9G5eK7uF4keLlXQlbMXVCOfPaxCkVggHz3nnm25/zPSie\naxYs\r\n=JR9F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCriTllS70BeRiexrd+NcROT1gwrnRcJArhRD7Heg3aEAIhAJpQsg2Ca0IJezw3GmU4WfJA1GeGlLwj5eZD1X8oTzqA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.c94e1030.0_1620860937678_0.9642220286819609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.40a34e35.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/snackbar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7eXvROqODUcvigYNhp74PYbRHLSgovgly2a7wY8Sg6/y1BLA3HIqCarQdkaBHTe8dLiTm80iCrjRN66UI8KtDA==","shasum":"7a7a25aa0c3a73e1d722461a5015389dc4d3122c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.40a34e35.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuPCRA9TVsSAnZWagAABE4QAI+2WnSvoj5hbTKUsKMs\ni24PNtq/Ek4s0RH/4II0/rsOw9sG9HqhUhxuLgthAaQ0LBTXpCAMmjU7QL9M\n7N2FxHfxmReLDjtuTqmnD4DY3sT5dVdWmfzJPnKD5yJT3br+kSWjb0eNGf4s\nLKsgF4pDnCHPT3loNsPxRb8S/CnZRSYrcAJ9Hieliu0lOwAsS6+fzhcl8cJt\nMZEkP0oKQ/v8l0Ipb6UXDWLtWh8eZzVIr95Vqfa+t5NKws+nBk+eaLq1xAYI\nHoQkLi7WA8n/y3DeWJ4wKEzHbYsmxf1iW9GozRT8dSxqCWCsjxkfi4DTOvhd\nBKzEiVoJqGQzHkBGAenVRbzpg662vvkSZ1DQDYFZ1MjJcZA0UV/WDBqkyqx2\nICtC/Q1NFyrr8aGCLGcWa2yWPiQ3HjCFV7PEOvzUc28GQe6jXvUE8yJhVwW5\nCdivZiqJ3Be8uFWhcWs2c0jq7fAs0YJtFWflHA7aeWi/y4wtkpHO8KYLMB3g\nvIB6gkEHUtptPdo0QSaodAygIT/DUcA5r9MKPDsdiMpqtkCVnj3tiejDxGnl\nXmH44lHlkVXIqANJDCHu0xKbXi0pbV6psTB7j+2/FXgN7I1c2y5Hzt3UqVpL\n/btQbRAi6OnXhjMMpnGrJ5hAsd8suUpjAGD1mcGUpBT30XD4PintSRY7tJ9L\nT0aE\r\n=+PGT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLZL3jKinPZHKgKioilw1lbH+lgILxmp3MBm8kTQstigIgY+xa/xtC9kW5q3qepf9nBcoAUvrOSizjcW5ZYsiJ5EI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.40a34e35.0_1620863886828_0.054122961689720084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.1be14d2c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/snackbar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bmR5Qu5Nl/TRFKG15RBavrErGwkwmoCnBfviw6HRrkOcezOmmIIg+BmtQNclByNYILANNTQ5ElPH9isUbJ2WFQ==","shasum":"4f1b76f3a4dab5daae16c9d4dc0d5aed3fd2fb16","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.1be14d2c.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWazCRA9TVsSAnZWagAAM48QAKD2ADJnQTYnxoM3bxCd\nxkZVXpKHKgmU9TFue5oM+BAqvHcF3fCh/H0vonvP/JeHiBUeyAf+dNRcY+cE\n7AfjZh8/NQsGDkKSDhomaPdYjRe+gNbQx6ZUKoP71R735iGwaULNU25SKGNv\nwnY45Gizx7Xbr9McFO2t1nq2LlzRSvxY0cW390x5Tn9f76aXP/aJwtDKej8r\nqus5lXNSl8K6D7wk8kS3oGn+rJR7TxyWfdqeM0kzHP+k6vMwR6gYPJZRWmQ5\nyWGvBTVvbXSdfPLiiuSSW1fqMtXiqp3G8a9vCdKZCf6DkauxcLQHOaDDXjio\nvmrFciCPZbcRDIRcM6UGNdFhxkP4VTrScdyAcfpgmewDIp9fimIpxst0kj4k\nvUU/z90PBCCyUGsIlVIqWRJvVYSpLu+h78aIfPuWp8Chqda0ZW3gJbCKGMDr\nwoYxSDVdoIsgKqz/HSVKlu5z28svN3PKmwTBvTrGDdGtHFi38Nw2SKu0L4Gy\nvRPzfQ7+5gr/DPNJ3ihToZIdzqQ/sa5evuLApRyuCSlBrgC1hc2ZW1zEcWcA\nOatwO3KMSe6xL/xXK02hssOWCt2DO5Ft440bW+bM9a98jx8mHuS7RO+Rjd6S\n2+Q7TTzm9PhFiLNpDgWhu1dDj4Zjts7vF9IAVc3iFqQJs+79TYmsASXEQPbD\nJHS/\r\n=wQ2w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBthDmIB0lTEa9iCKEVw5tRml8rMDUa3SJD15DooeWMSAiEA1i905O3dI51Nx3Vc5Z1MDG3Pw47FJBMQcNN6looJPBU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.1be14d2c.0_1620928178766_0.39499925230585453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.87dbd64f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/snackbar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ehU8vO4m7lL6Q+NaxjXOrrjvVkOE3RaJT9ASCKj02K1zjyGdxVvxEwDisbzha22f30Tie0ErrLqAWLm2EgHAYA==","shasum":"1b33dd0e1f500a38de5cb95f01124ffe767daaef","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.87dbd64f.0.tgz","fileCount":16,"unpackedSize":68348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRlCRA9TVsSAnZWagAA+0YP/37t01TB0H1kJP/TW0HR\nuXBTCasm8vo0NXV89PnP+rXvtJIgkKo/vGTr7K6gcLBrc5FarVsWn3f47a/a\nBQ5GA1ZMjOH9yq7m0tCaBj29Gus+NPGLQe/MiZS8/S+OCNWKNzVFTmQKIjD8\nXcu+VvxAkuPoQL9md/w5jvBicoZjSjyWEAmjdeShJPw5xrZXh0R+F8DFi5dm\n2PbQuGRYf7XaXWL0uFQ9lX4iYpRwuarJgDpgjV6fcc/8avADtvkK+KWHyZTi\ntp1rYER16wf+Atvi/AexCSV3RRpiZeqwvaMzSzcGbVYLUtOhQYlS+wsITe60\ncvvXR1ALewD4w/wDJ7t9uPlSPoJPD87MevHMDOijZLLl9TFGjGOywr0ySuUD\nEw257u1MRFFAybVMmJPjYjmWwGDxAchQl8Dio3rVSr3UsXUYq31lMGMY9UR0\n25yS2/7AA0zLy9KraU64fTDsxMATQH7gHjeObE/LNjJ/3EkApVy9j4S75Cvw\nBM7yRcW7GY6wd3rz0V9lVKj9euxRAEWGzRks4tGGTCrcsVyiUu0HjVihXb5I\nVteRqCINyX+7tAKxxLtwYTunmwn8McDmU1xeyfQtVG/1/PAGXc7i+IzFSMTA\n5dlLNFC1lKIPQhq70ySQhQxfUlDhe0PygPyYoa1pkxRUncO/LTnDHerQk/TI\nBRm4\r\n=jcxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFc8mRqBRrngtludxImzHfogrraVmBbOB4qI21ZnZLuAAiEA8EAuNYO5/Wtk+jD+X10xMHpO6VfJDTjGMePwQAbhdmA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.87dbd64f.0_1621025892658_0.12766804463671533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.c452e4da.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/snackbar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5PB5cD1FHmR4aXmwYjhMztjNvFU0HbeT1Sr/dzqpjkTdDFYWFHbqwjiJ4SHDjyKVicfPlKl2ImSTUDctulpTiA==","shasum":"2d2672ab390ea63ce4b58c6a9d73e7a2c35f6f90","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.c452e4da.0.tgz","fileCount":19,"unpackedSize":81443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzjCRA9TVsSAnZWagAA354P/AjmylowyzKIscgZrNV3\nnZrEnmM1m6l3C5ApnXCe4wqtLnjaU5msoLJ20drLLRbgKYqAT8qypeKe0SzQ\nrf/zWQzG5FE4MM5EXQMaS48E8EVOg+tBjUm49T2p85b1EjdFDxxHDmd6wceR\nPKJmk3t0/TZVG6jsiXcEc7fpIDY10mizdbl0QpD9XthgR0aqzKuNPQGAd1MF\nWsVfO73dpUluGdEzVLmA+MOi+Cvkb3IbmVepyoofms7bDOEdJ3KO+UNvivp0\nywVSCh2feQGKH8YYPnqI957R0Te8j5/PgEKn8PfFAULGGrwM6H4Y0Z3racEq\nbzzGyVc+K1SI9qeW3TX+ALeyCM8Dic5Tl8HXOEcrFhhRP3K4Q7aG94YG5utj\nFAHc+dvvZ4vpph3eh8D3KNckCpE8iutTPZEU7IVlEMwBadkmnfcBQzskSOIP\ncJY3LZm3yW9XN3vzOMskiwGB4YA3e29a6U59OlHcQW+iOfbb/z67ddVyWfPv\nNxMgEaOkcWt6At2bK4Q027kfNNVWQc+gQPpevLO3pJCDoxDEzhuixdbsrFw0\ncOPPOnQvvnC60zZnMigbNLvhotEv3mS7k4Bcvoy4wURmQAFp3SVp2WGqZaok\n70b7e7BGXfKhOsrfpxuufvxSwkG3FZrN9bimEErj8LyDKDsKGY3AHRvc40aQ\nD71s\r\n=FBvB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmhN/e72QEm5Ve5uC0PqLB1Hb9CekJek+77BtNHJJEeAiEA9Mj2BIzbWAimg2l5z0o66AYOrPJRRn4+OPaD7Rw+qi4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.c452e4da.0_1621294306676_0.23197256912097863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.2212691a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/snackbar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uiLhhx6onadzx8qZN9C/dm67M+VftIoMWTyDKZOkzPMFhj7YeOCCX07NuoCpC2EmQddjvz8qbLGkO6ndlfis9Q==","shasum":"8e18b202f1caa1c900cca679459e58da4174385e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.2212691a.0.tgz","fileCount":19,"unpackedSize":77357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowG3CRA9TVsSAnZWagAAwNMP/ipDumMSPKqa+9PcKcAR\nIOh9hgT0U9tT613REAuOAOwHiynrSn693YzAW8homAAQMKBAUk7Om0U83FxC\noegTRwj/Y/UgTSmkBDMKndUt5sQc0kWC+ZpJZ/xs6kfp8QctRthez7nI6bvm\n0yMGOOmB0TuYzv0G9vty9VeCf/0cAxVCQ2Dhm/DJ4uy3cUvwWTsxR1qN/Mio\n9VocE3ZnuHLML4j+MmnpqIJ2Q+DpTpjQRcVsCd3p+Ywd0nmQdQ5hX7RjIDBC\n0fBynRiuKaU+mi/xZ6GQMlsJqeL5aMFSfRmtwic4cOuwo4WTU54ZQ/qAem0J\nDLlNLqUjMyCs4Jz0hCrD2+CsamGlBfF4BTuL5yROGBZfcKt6odkqYxwHHxry\n0s+2vXNH0HFeteIBBhI0qb0zsBMyXNKcxVJ/Y3zcVmnKgj7deMoEqyREvYmk\npj6GyPoQSiTBirybvf2n8YJqmnrFCLWRiMN95kY72RXSFoV5/mEHQvyWMWYs\nk/5Hs03xy7a7KNpvKm+/fpunooCoioDRLjZ8RT1e3gIFAFjzvF1j04ULQAKr\nHI6hF5UlyvI57j1ikZRxVxcI8Y/rcG9N7KvbDb6w/BcTDKasPp2zbnLVBhJV\nzjf7mMX3sTFv1D9SAgIVFzKiFdkArRLwGF9O38goduZtMDR6uD5wdG/ErEJa\n6DDB\r\n=2+CT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5C5fOchSJyuEdsgQEsj9fFEQ7lmb2eXMJRb6I34GGZQIgQUu52JkX4ZRXmhEaJe/QsqqfwSFZN9spPl/2zcSs6Cg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.2212691a.0_1621295543046_0.4490223083981151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.f748ff2f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/snackbar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I8Jt3g2cwaqkyrpTEJ/ZxzPDKh2JPDp01uO8B6DE45tLQqN/YQkNfVxnkgl80OkHdybhpQ73jo7/rhxWWZnwBA==","shasum":"6dbbe3a07907d4cd29f5293369bc07241b6fbf87","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.f748ff2f.0.tgz","fileCount":19,"unpackedSize":77361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowixCRA9TVsSAnZWagAA3LUP/iLtJaGSZDKaSD4boSts\nXXnAnoH6KYovYiGomZ2T+ovUVZgHjlz/IsU/69NEJUL0WxiywZprike1XiK2\nSXNkuWsZ5pLfkrKytAuBb5chr9SLKF/eySxmTsNRl4z9kkN3TyFgyn/zCanh\niUM0SV53+KuGk7TUCzvHEZr8np3uGPXLPBUPeZkh8wTlTQ0Ew9Ob8RDqT0GR\nIYE+eU3FgGmOu08GYyn9BprxWu4NMBAC3H+CUKtXkQAgw0aK/y/jxH7RMhQF\nQl4bluC38zmGrFFXYWcAZoLIze+ONvqmUaYwZT9MmZxPoiJEbxN8zt81FhQ7\n7lStFQDGax++nd6QKp3e9ylLPGdmRyQF6GAk094gRHEqqCeM9AS3bXUhDybc\n3lUqPRWsfU15PN2jtGTDXfbjbHkMlk/7a2vwimOicDZ1TVtlu9hHL+ST0G/X\ngLx1pujS1/kEYbEzKJG8ld6JfFJIpwmAqOkVx2+M7CdoxuRuBZgLSFJ1ClnL\nFWooxHZXG3RmZK2sCu0Kgp/mzZS3iMav3T0of1S5YI7PQ343Q+9vqmjKCfUH\nveaxt1Y7Z8jP5PDx9Rzs0t/I/BRYnLAqWdGB22Sm/RPkLO3P/nRKDa9Hap3j\nrtZp4703fg3zLBah1LnQfgvMWZb5hLVpii9yzuTrHJsYqyu5UDno1ILEgd90\nglG4\r\n=kZVC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxcQ0LtCCGk+q3yDN9Rgp0xmNS0RlGzUxdi+SuUqpAzAiEAuXM+U9KxXn2T9nFMg9aHj1WQd+4Fvn3L3/9fcjZgSCQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.f748ff2f.0_1621297328735_0.5348595788732684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.cc04657a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/snackbar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZRfKTQdEZvmFPisZoz9HRe9F1Fs5YqV6JU3O+iJR+rhl9DRnnDBeh6p1JRLz46gjAzfpBv8IvoyfLLTpDSbiAA==","shasum":"ef6add6a647d51c03cd04f8908c85ea5ff59f20e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.cc04657a.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZrCRA9TVsSAnZWagAAVK4P/R10cwLqA3wPpQSuWPUO\n69vbRITf8f5BUZ61zWEgCIbQWyJqRQ/tDv1hCH6aoorn3reiNg9cRe1+l0PY\n6N3qKgKrV6LByqFaG0vC+ntiLjo1FCKX/hHgrKpfISVD5d//T9JKP9oMprTR\nyNeGOtyYAAi5VnmWjlZn+sns7D75FhIrSDg37MH3w/LLelansFTtD1kqdfJj\nwu4rWCkE7Sti77vV+2fl+jG4j4REN0/+H5Boc2zkkYTOkJ9RNsdtbOsVT25G\nKA94UVMOsxDn+DLBHunL4lni/9KxG5n3vuckRSwbCdDIlDbhqHy8vP45lQKS\nT6IdiT23qg9jxm81XlNJLXrxERO+hA5OOPdLljDCsN5XWBeIPDm4kwjntfSK\nGrpqxls5le+WuO5ENlQuE+NqtJTtOsNYrBu5t5dRzTgjSceC1AUrL3h5qRlW\n9SAsiaB5814e/Xw1GPbPuOCadqA0Ew+m5w6ffTaSBuqYFNZzIyj5GZd9xVg1\n33DSWYa44UTfEmLEGesCK7UfnfogFEZF32z0zC4jrSMvLb7icyFm2p+5en0u\n250nkdaOc7dDP3N0l4Zr3yZzVv3oK6YAABFOyZX51R7XG3tWmYqIrunCHzKi\nb7Ac8m8DsZs8Yjh78NVLsVOfnk4zMj81b6B4ndi5J0vifPtVWglbz+P9jSsM\nhnJx\r\n=C09p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPUMaAtJjD+jxgUWYd6w2oAnemgUEi7AkEp+acyN+migIhAIua3/qike0jZ/sGIChTTkKMfW+yXc7oOlst2zwSgz7/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.cc04657a.0_1621300842664_0.9878315822092107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.3a3114fa.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DAoHWD3xrXMa7/PvPcgkbv8Pj0u/lo6wEu2PhXeJNmhwnWF1r8mZ+btACCgJ18IK95JSKR3VEt51ckSpSOx1iw==","shasum":"df4c25759da3f5cfebe641a45858d702bcd5e399","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.3a3114fa.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHNCRA9TVsSAnZWagAAk24P/RIytoGptPlB8etph8js\nXAlJidHWkgLGxGab8KksaXJ7avJIZkjC1xWI2IYjzuv5ScbuT3jHtoRibSnc\nuqO0oNKjin0oBKW8jKiqjOVeJGHiDZy/JwWrzBtIzb0308c15K7m0gywL9di\nDHID2a5X9+pOPtKo3JG2CinXpyrietAqM23YdAOKAEZadeTeZxA3KypBe1al\nNd2oMnwbmCa6IeT8UU8KLc3tXuLZXWJjgYC+k+5dGhuhONhUQRuOS3xWu/ue\nPxdZyhOX607PzWNCEpi4QuX5KX5+69+izb1et4i1Un9OseqsTFjlW71d63Gm\nxWdWHvK7a7/7SijBg4SAVbR0KIBnnxd25ID4jt8ZZ2WWXvhrWs3BxNfvddsD\nGygxnNptqwBjlcYXlej/SRy7PSJmtNb0Dh1DIMG5goeKOsO6Vi73KFhCccLc\n3YIhrzgnHdpdn2i5OY0v5ZA6+DvCl2SDJnA+oK4p9iW6vlUhN2foRiHG/yJ3\nVr+pj77pbmlC7iNbNdhqdBlwhvWBRGBvAGOfSbQCSnGjW4j7vIs8a9ln+/AA\nsVvlI9pq/nCvbzTQ5cbZlVORyqhVImM0/TJ2011OdDijXlyEx9ufRRgbGPNF\n/vCfip+DxNdccnmtOfPCHtmmMRrEDymYfyHOZ9k0KAJuxqkKHrecuACNVdhL\n051r\r\n=YHcb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1UjVMgwZmi+WSzt6M1orotC7j+9NzW7bwaDSM12tteAiEAj9tcGuhCB/JUetQyziWMRyCWhyjOHHjrCVr4pH6IEv8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.3a3114fa.0_1621467597093_0.651170156781925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b46bdf83.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fDRxC6JZwkffxPioMgWtsr4hETSPXuprFPgW9lwruVe3CC7NNw3Z2DBuRFiHiLujbuirGMi2m6LHgwlAq67g3w==","shasum":"211b4d54a367268416a6701f58f9bfba8f293efa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b46bdf83.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcBxCRA9TVsSAnZWagAAUV4P/AwZQGjqqm9slnzaub7R\niMvz509bume9H8VK2b7s4mLnfgLyaoI7nEcnE1ZzrGkNddX04+aTJcE0PlIh\n+mzLmjHc+q2skvuGJu5ZQRlkED4yxSLzKaHxjeJLTPcTc3SBHf7qpjJL8LC8\nAFg4REiwYlUM7+aDK3OdY6VqQcF6iFenR1USu2FNrhRIfIlIGw8L0dJ/zi1B\n4fawgE3aNCc+Qpm42d2qAun4AAqa0X+myCjSsiyqa0/GSlpu3AimORPuwGuZ\n3W1WfRb0auVDpMqMNrYd52d3k39dr4PWSXbb1bB+F11BNIChXihQ/6T8iLxx\nCtqW6fDTCNVOKVGtAFhdbxttF9tO2Bucf1wNFUhXJ2p1pmC6q5p7lCUPLd1s\nyFdB7HMjS/eFmMvoRaHpdo5kAvuEUFQJElgt9C4/LZT4QkRUb9j2saDLM9db\nrXyhTFJMcOTr24mhojoknYIExckaXNPkiBNUrq8/K49r4FhJMl6kGPHMP6gn\nkn4O7AMPqEC1ExiMNGmdirdb6Iw48NR7qXbxT05wX+K1457T40bEQhAvSlNK\nhwCLrv43ErMAbT4GxBSze45UyTIaVHEFXUad1esJMerTsH2rnIF8HQQxrbNb\nbi5llzboMoYbeUsbJPPBDhxkPAqOF2yt5ntwQZdtJjQ6KaqfnjnguQ0ndcxA\nbr4c\r\n=1ApJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvyRqf6ayD8hyL0tFD4OyAp28zIzJzFLq4Ai7pljOubgIhAOvxDU7Ljzv0TQO5yFXTj7lFIbWMqODtkt5z9E4vbHQH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b46bdf83.0_1621475440842_0.1618458407518122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b401a081.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZD8+LLkODjtyxp7hf+gBVWf1Ql8PyrEeraWZJpU+Vr7w7rpW9tir8TdF8v2550l8BRcz676N66+yAyTZoGRnbw==","shasum":"8bf245105843892a81a31aa7d25037c3ef4553df","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b401a081.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDDCRA9TVsSAnZWagAAIZAP/A+0iGpOdIUkfP69szF7\nJPHZZsBenI/nuQzuOCelDW9eAI5r8F203MMf8/05948DCFeLISel/2LZJODo\n7rXgL0fLj0Ff/NVC1COJe2W+xSpUzVYrKuIXsD8R2t3Ji7T4rkIYZDoNR4Gj\n0joqSxFlUTB9pb/0aQ+B1qblYhqIRQlvRrtvi1Wk9sjetizmjZ+RZW9kwlET\nwJcE3/uxQ8bKd09tjDXL5mgprTtWafYWizGsU9KED10mIbP9HLLbYY8YJwZO\nISyRexk9NVZg5g6bsTb8I0Z22+m5mGo+qBUXvTE0DXxAAKoabIBRU2aZXQvR\nYW0tr/mItVrO9mEDIAUatA5jn9lJ/UjKp1EQjzkyGYGfdvEn46pw9kgSz+Wp\n9iyAXOLHYzn1saUYpwX/wIyiyLO1cFN8FSyfpdQGQrWH+WzC5cfwirhEy/Ch\nAyMtFXzhyxuuNq+rpkVILptKkhZx6NyCkDK/g8wnI7zpvTvXtZlPSefpLPGE\ntPtpE/9gh7FE7G+65TPwuGjhO31FkKVJAeOS9QEt84gAQQy8HwL49wam6vM+\ncU75f+OafP5rKPr6r+2oP7/kmtGIb2mCguKfPHl4U2Plz9BoQSa8jurSlK5f\nIP0VkibkrTURjqgUJQud6GKh74vJ5soLKkhZ01mZenm3iGiI3lOwGGVZC+N+\ngYXF\r\n=SheR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+AS8DWmPRVtIWz5x7xe6gHNbQ2qw0ZsPJSMFimB23SAiAhQhSuI6cZygFd8vGzXIobbLbv+KSXElnWB+e8lqLMBA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b401a081.0_1621639362731_0.6205182672702649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.012c8dc0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aeQwK1HOZvNhg1QJfXRAuGLkA6OO9iHq+VKW7d+OzRtAZTEAnjfE5IoIA9DKiRE2VldQnLcTmYo5kRpYS10iNw==","shasum":"f66b596acc6d4069e274fe5241ccd01df6a592c9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.012c8dc0.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1MCRA9TVsSAnZWagAA0uIP/2k+duG33NcHQaTYpNVu\nPk2ndT3LBO9Y9lDGiULN0cdiPCf143624nfJ7QmPHPlFKJKEbwZPyI6T3fAD\nDzFzGIbzMcVJP91wtv3sr4rfwjzKpnIL/Nh/B22V8eqk7Sm7fZ93TkLKmB/P\n54p1Uvsl+viZQwGxbdTQDhRpi7xS+NnRiv7DtwMR5Z1SueaM6SSgitUXMbYn\nO9NcglpATSmNiGMGFahXxul0orHtJEs5pGBLISbVYYe8N2MUO3oG+Bs/4TX9\n4ByCRwqZ31AR4PtGtU7MWe96aoBZGy9+VhcWC73bjS+gG4ZMSzdnHrnR06J5\nZaX+9DuqZZqodlCd7udbXdfTcZMlYKL6FTpcCUk7ogaEgx2YvdlSwzwnNavR\nHuhzYDGKZF1OBzHKPaXx9pOMkRI4KZDRXvT1GFBfjoxQwARpt4NgljRtDf9S\naIyUcDTq/XkRcmg0eKaIO/q0tsz8RFzvEiSy57qvXBzo6U7ZFlPpoiaRWwfU\nXxecCzPdT9BJ0N9FZ8/4wgxcwR+rSc4qwWZeeW5JrNZuJG9zX9DeljNiMaZI\nrQFOQdWZ0gi42TACCkBJBQAikNIB8HjE6nLNR2gJWPCcDqYqMF0muGSQzQxP\nts9lMcxA2YkjSZHFu+DfmEOT2NQkOsFUbewmBiOR2Zqc+ywttheEGY7LykRE\n6bN/\r\n=mgR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZTemGzpYroSTViv6dP6lqN+6D4zLVHyjkRGHTqXlSkAiBj2aBg+oA0SySlpsZMSVtZzp9SD6DjBI5aYSXyA10OUA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.012c8dc0.0_1621642572232_0.43523705162092186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.e01a1731.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7LaHZXb7wvLarzqCtMHgSFqW8lBU/lmk+Dkc1NKIl+LrwkhUsYXBSmEMbuznEqENKfc/D5eKSdL3TqqADD90JQ==","shasum":"a173c243947dd8c49e11120ded4d5d26fcfa9402","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.e01a1731.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84XCRA9TVsSAnZWagAADroQAIWmnTdrQYPjAFsaGEIc\nBxcxWqOXd0rLHud0C97DUvvpMbavwzLx7y7ggZ+MhjittLWrttZo6+pPI7CO\nzyCb8MOUGsApQo2E9+Fq4KVcSB/9lvKY0Ni7Ea8q75gyfXFr83JLJ/F0WqjD\nsTASNGUC1/FvHHDZ6Fl9iQfsGU765V6TZbr4PsiyjdQ9LiV141bELIaCfL1l\njE65479VwsZKG10HLtxWCISBLPnQ7IW0vXLBq36aRSiCiOO8lBPoWKx2Dy/k\nNdPrzSlpiPT81Yu6isJI7faRut8ScFAtNFzAbRfcEWzRp/jJpbM6kb9zzThb\n7pRSeJXHX9wVVxNyjUty1fzQe4E2UlY30Q6Vno/kDY6xJS9BFmO00ez/KvVz\n+hCdPMn3Rl/W2bhMpfPiM/GgcIcantSpBfvqQAlimZ508rJ7MYJVju8oNXLm\n8uq8IVva+9Xe+vIkfVip8RgQGBNjDE3+IQIPG+2spWg3dUCqCjALLFTY6pCy\nnR5oWdeMBu/UAxpsqTpMPVQ+S8IV43w1+tcXI9LfK65NPMj40nR2osUlsX6z\nCsDU307BZXFijLRMwUCUFOEXMCBZlnRGVoYD00YZlr2tML5K6VidqBVduTpb\n3QCCwWDTpMsY/hXb+NpmbV+xBq5DajJ60Pr7kGkRHrwRo0g93PVbPJy2dcGq\n18bg\r\n=h3l8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3XtcHYPPUHh1J2hZkzpBxGbF0hVimIjv+bwMrGW+v/QIgWarCCb4H2Xkze6sp/tdItynlcMm4iinGBKudVZIAhaQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.e01a1731.0_1621872150970_0.35343427492518664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.59174b9f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Z+agVH9BPnynJ2J+CWXuobzEidWScyI9hi+tX/PtltTJtgfq/wKVYNkIe+C4HCdP63ylQDEze/FwU+ljP3OSbQ==","shasum":"cd5bbaca39e26305f9e17a533ca6171a3a765710","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.59174b9f.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuVCRA9TVsSAnZWagAAvB0P/RJLIfL+BaNMyAmsGXLK\n/bUeAi6jCMrzVIhJ9W2ItKamKtf7kFJv133iJZtJB70SuHKSzgsJINwEnLuL\nMENcDjYQDlKri7Hr5VBOJaCzyksnIZek+cYIS0+7rl0sX5tfAje2ItmQBjQT\nko4q7chKklqMTVSSbJJo4iz2HHLFaQyTRLMuWU2DH0LxanpC0yKeUfKGHEfz\nmKY5x8SHna0N2vP1GwuRLxguNXQkyxqwoAm2Ne/Yey4PHqQIsDL+ZDZBo/83\nBRSRnMtIHs7s50piv00qPThmMJmHMyJuPWo+L8XZI+ud4ilzT8ID/ca8sJ43\nkpIuTFO5OACSAi0nNO5FD+mED6cHC2vxqu2lFruoofdvH5z2VCygS5HjA9lX\n1SBlAwPtzbCTKhJulioQIpM2A6HXJAxACYJVOaNFahQMi2vNwl2x3hZuQS30\nUrkyCycjTKrenel2QO4YtbdEWBBWJNffqaWDbi224KRF0YM+dD7lwumIsBmg\ngfo7guWSllkfZjBIHPjiM6QQx2WTbvKufmqhriG18/cgRvydQDdrGmq7/lpy\nLfifn2KZ+9aE02nh+9Tnh7Qiy/Ir/B98eoijZYUl9ShpP9SquRCENW5DFInS\nZTcOGUqGKf97zddzjSnXws93S78scS6DQJuetRJ0SsebSJVgb96H+xQHEpSD\nLf7H\r\n=zIVt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/41ScO3oKXFSipf1N2Lshrj/qoQr9SrrpIH3a7TdpjQIgZMKtD2eFGVxlduHn8iCzmirg5x3LJBGSb24DLa2N8Bs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.59174b9f.0_1621965717015_0.8860302768447821"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S+jX492Zeuy1oFSlXucq+/DSaD7TSgk3LwdQgFwSsI3LQu3SCWiagWIrBRQp2Sx/dUFRTmNSJ+AEnFDGhcJehg==","shasum":"984df95bff55b60f84cd0a6fa6be375e57787703","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.c96cb2e0.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwHCRA9TVsSAnZWagAA/KoQAKF1N61Oy5mYnHUhyZ0n\nuTbDJhrRkm9/0YxeG0FNLB3Cp9EhaxGoa7s6gm73dmHenyzQvgpKjmjNcZQg\nuTZUrqOQQIYqmxL6DAOIdy69FrZh5PI8CCo08vMOSK1pfioG7Y+mTmnzh+Xx\nDW7Jl3pW9E1KEIZMffEYvcxBOrSLadn/YwxedX+h3SSelUXgMdEy9D5RXYQH\nbCTViOcrio90A2Ez/aVfTFCwRyY662sbruF1WyPY/pLLbWkU/mxh26Gqs0uD\n82r8p7yslYKE2kP11nLJVJACXuq3nODQdcysDfIB3WJ6jCoo8o52Fd1TpvjL\n/vbwDnOpG8pCz4jYxVhhvRqVZcp1Bu+e2hyYhRSDJSAoQKll/c/nPxsn4ZJE\n1vzYtCGjddxKh3mEO5PLRC8BdDtU2/OGd5dxhRS/Fw6R1CEiZX+73RqKFiBd\nWT7b97uGEq2rLpcqf9GviuwbSv/Fybqg2oGNA9HeocoduODfF5rMEPNb0QEs\nbspoGxDe8VdDdBXfEMRpjttWx/RkrjBC9OKpjgSdUpDTZpgsoK1igiJZgUil\np7hub5VIfZ4UgnFApS/ZFUu/TxhwcPTBfK9+/NwMsUrvwEe1TS/nuEIqRdMq\ndC2Xr1qU/n2IU6zJIC4V0aGb+QAc4+QEgUNic7aSgQZWw22qXGLC2rrE1320\nXPLM\r\n=zx1G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/0+Z2DMzHSdm5pEm0SdRh7g5WKmUpdOI56OItXpVndAiBhP5jGjzXmuFe6B3djDAHCTMI6qfscjiFIHz9rjVrE+A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.c96cb2e0.0_1621969926894_0.642418537976674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b9b0e330.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LaWv5Qxd2iE4M2a+au57NvKFk12o+ZgSj0/mdsvws3889NvMch7xrVASVy68Auk6T8h3wLEcILbkbAro/i5V5Q==","shasum":"53e2708f0971ac6c7496b261e3a7ce8d07f5457b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b9b0e330.0.tgz","fileCount":16,"unpackedSize":63342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVZCRA9TVsSAnZWagAAimkP/RW6HyGYUefjNhMNBEMr\n29Yr/N8iKVf7bcSWOT443QUiO5WMOA3V3NDjdHe47JOunS+wX1QtrK2vtsbh\nLkoy65KfEBMfFOxB08NDZ7TLhiwreIRudWwfesc6+2gfWmT9OftIMTX3d2fI\nUzSET70y7W7IuhvzqD43r8xOUYJxOMJqkAQ0E/i7UoC+Sjfic8jXJbsWJGvS\n8KuPgEPlFzG1rS5tK5BIXWDHbAdLgWdWi3OIvV8R8BBPvTFn6rm6C26HPdAt\nrTuClmvcZ1TQ37YM8KajKSVLPeARNMtn15g51SvlxM2OgMVtrCWY316sm5Yp\nrq5aCj4eRlMcZJYhYUfLJWuIPRF7gEuU92MMsJymm4FQY0nuFedmp7Tml/Kt\nzGI3BoV9YMra4I/2Z6sFMGRUXq4bILt2MYfXZHZPGeOjyrRNclJzuhdAvcb6\nIAdiPTWsKk4ZidrtAMAStgyfrJEtISEhdGxtbM6xZjYRHDgT1hzaAgzaWmNo\nF68yNYL+hXQKNl0PTe0mnU4DlYAawke04Esvo/wXtlr0ECz0Y9yIDHr1sa1f\nRhKy4KSRRc08ckusPHeU2LSuEd0GjdN2/8RyAZXRbbHnJIZGtlLM/ZaUnUVo\nRxfaXTvNh83L5hpbh/iREk9zEU5UZ8+GjUGrb2DKESV6PZ7OFuFHdOciLRrB\n9BbW\r\n=O3R0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYF/TEs5zC6KAke2I88iJJvL93gkadO2drpt6jB0dg7AIhAKPnnOeVzRHjNGw6wO9B235M+7rchXviKu823SvU0iGC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b9b0e330.0_1621976409391_0.309399784537121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.ea2a8063.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/snackbar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IawciLHPWPt361+/yV/yHWT2fr7eGtEWNzSm8YYQUW3iYLwkubN9lR/de6+mzeCBsGEfApDAXM5Mn6Zzwk5IKQ==","shasum":"b8dab379afdf4f1fe52d58f4e9c08d19695bb439","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.ea2a8063.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWaHCRA9TVsSAnZWagAAiz8P/jE2Qktkwh3ddCMBfIWG\n16aqmSxEMeizG6JhlNfaZgeoF1w3JKeb+4TfBaAELdMAlDivyf1b9jiVwLxe\nagetRoR0oLoqskGnrJ4F9q8cd+h/Nc02Rvk2zwM8f6BKr49gbVnG+X2ptWJ1\n88zRNR/Nxi6drdm+AtEpe6eNYc2+wQRe/GwDbo9RMNdczrzlXb1qH5qhx3vy\n2Hsq010XvAmcaKb1p96Qx50CNdXUq0qtNEay7WKGovNeJIuWWCjZszCbopY6\nUtcjQ2TgPt8gcgvheoX4eHvksEiV6Q4+B9RvRQvujOBDDphhaGflcJ/sPswn\nZCUs4K+NkykpRU66C+fZXIl+ALatmdHeBJ6/qIDIH8yFuWcCcK16gqxydifd\nJLHFKOCKJkpQI9pxqlE6FLRjPBNNCd9lx6+JQr/sgk9+NVTzDgMnwCYGA/nS\nGG0pwuj+VlCalLLN9Gh8VjPnBJIa9e822oA20GfYRmave2HgTUC5sp2w6Yl/\nUcc24BMmt05eeSdylRcfSEGFBwk1jvaxkWHtjY9h/rmJ1L7ohVxml7h7k8HS\nGuFnC6SJrvklPHw0iimTKqgCp3x4ez4lNkDT1wzEn5XcTwcakZ222cStvW9M\nr3I76A3gnZWomnx1yv+ThxaVawECM96M7Frbp/GNyEujvoMQOpN94ButSEAM\n5rmV\r\n=UZvY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4Ex/Goxj2ZE+ojhlSlYVjV9seyYDDLTrW5QRHmtIRPAiBdgB/T8lCcStcRNMXyqDDPH+0OAROrZbHvECpY38Ciqw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.ea2a8063.0_1621976711049_0.41791303242763744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.60cd9178.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/snackbar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x8o2pfl7dKDVsHpRPvLp+AJsqgjviDBLP19xDNIh7VJR2T4rG5alF9c5l4JHOEZpWBvnjXwjHsRigiJl09BJiA==","shasum":"b64f3b4da61572fea8e3c7d6defc3938f29aa364","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.60cd9178.0.tgz","fileCount":16,"unpackedSize":63370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYStCRA9TVsSAnZWagAAZt0P/iFIFn6Xhb6IeJWAUNEj\nQAozzAgm2UT1iznFhCMLTDM7HJuawyjnYSmnBQ7SOo4C2f7jJdL2RbWFVlZy\nE+3enMogGzXCPezIEtWP+2KTDVb/d1mhSFeAw7DpTJus1cRY6Bqz/Vd/Yn3J\nXY7ynhwoNEyj69A5+FbEoVlI3vrnydZCklFABcjiDRvH+/M5fWBHGWSVUPm8\nf/t8XoQubRFln+G6b+N/tMedj6DACz2SbvYonyraCILmUAoRz7233zaveZvX\nj89JyeEjLzwLgNO7NKVMdu74XcH6HzWJT8sf8ElUUlIOUTOKax0vrnaGCvk4\njNWXGAX9vMlnxZfyTdEB5zZhKNeq2nLklrKdmYIbeoXJfGlwDK9cgHpGK8KR\nQkY+hBCcbi3BF6hmUObhm2f2B6+z1XjELXtNXpLWtadzxxUSSF75TNwO8ots\n2BEpc6JH5zGR/CEW16petX7+KigiydzBarb/2hWUDVx7nmgKvTF1p+9hRFzz\nn1SuPF7Wk7crOFZrLTjGx99tI47mnLZbQlo2Byrg5oZy12cI+OwzBu6eaSDv\nBWnLijqUm9Dgs/5zedEJwA3e0KHxq9PjGvLh/qBXX/cXCrCMor7TxW/i/0g3\nA13/SxOGt3Z1d5572jSMTXlXDoKy97B4rZdfCcUByIMpfS1vRD6ZC9Add7Nv\naQyh\r\n=k5hy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkpS0liGXtleZ9DUqMlLUJkhPOxZIhlfo3OjpryA4oRwIhAMaaxaz+gzif6mli1Qpsiz/rKRiO9wFy2xt5xsACxIyF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.60cd9178.0_1621984428743_0.1109293397179989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/snackbar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qy2Xl+PWdb6PxjFiArqMxBGzf2sUrSwIXgkITbVoyHMfopy5i00HTH3A6Rcuz8Ux+rsXrw7aeejuFLB2EllB/w==","shasum":"65742cb9ac5f581d077818728ada9ecac80d743a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.2e2c75f2.0.tgz","fileCount":16,"unpackedSize":63370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIFCRA9TVsSAnZWagAAKDMQAKNfcxpU/97rCe8MYAxg\n4NZNMlBu2UBliB2fwnrSKT5Fz0Wa4byK+6moIVR1SksJXdCYWRAd8qEllCF5\nNez/SQE0AICZTXDIGzsmmnLkTN0fgik1bnBGDqhHgdrBorCwVdgTE8MrqUwl\nyNu4QTsAkuIGxW61poKcmy+0uq0faE3A+5ITg01Sw/X5kLfyNPpGDK2aBDRZ\nXm4XdfRinwJL7TbmZVFfOBUxzMK2PMgAbymkyog4zzM0+4KxySDDn3oUwzGF\nvaeFP0LMEcR6sQPi6Hn5x5iIOQ1S+G+eWAoyy+yNmwwEWxtQwMJLIbrWlIoM\nJpa5gQPCs7wI4L/nXSGwXp0SHPaPOJh9Qsm3C5QXNUedBIs/sFwzDT5k47iJ\n/R2XdckFwqfFEaRnd9kJJ5mSebtnwZbrM2HLsa4KCdv1utCFVFGcQy6DIY/s\nPESOjjN8zFmjkzljEVVtcmuZUoY/Srio6uOcg5EegYvTQWVXH4SIf0s9Yfuz\ntWh8Ak9DS+Kdbbp28/kAU7UIz1Z7riv0USZ63FWD0dnFNA7O2YE+khuZO6ov\naplhu5bvDeJginWamKzW0MZstAxNrYFES5ZSRf+ld8JCV5R+EWd1AITTkDKw\nqnOH9/j9QJsvohGgBLnWv4TKytVFTZy434VUDsJK0pX651YmNomNcGSyxbLy\nOFoA\r\n=mjKe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCblhqJGtizFWDq0a5CGmpacpKzpMPyyp9ADYa/9nSr/AIhAKS9DXPGkjuvgyIFwVo4GnTQNwz+MfCKxr5JeS90VNiO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.2e2c75f2.0_1621987844869_0.8154076530921868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b99c77d5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/snackbar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oNfiDg6Y/Bp05W3VZNNB4K5zDHIDI/9cSs9VZzBSW9C0h8I7kBdz1lXSyFw8BMLc7LC4zn6546tTd0BxFkveyg==","shasum":"a4ccff59b26b28f3a93fcf0ce6dee64b1c70d46d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b99c77d5.0.tgz","fileCount":16,"unpackedSize":63370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3BCRA9TVsSAnZWagAAQd4P/0d1yZkv4zmaK5tDNkr2\n+uITcHjeGxuKnJc10/DNJtRYBga8zjcYF19UQXhhcqDXEPxyGog6FE2EQG9R\nDN3B5MlNA5ZZ1yua4njjaPPOdwFAvcNevFv7NC5Nmr4JFHCYtOmbpeC4naCJ\nem67gf7uKnJtlI0qGZe1Hbx421zW0NpvN0lfZgxRCXw5lecayyPi8SxIVhvZ\neCFty/2/tY3N6FLJAaW5FEcs+r3pOQ9I0zZUAk9PN8gAGyB59FAh8fManlwT\nrU8Nw7CP2rp8fXwFc7JGPalGBcaNpythtCOugjjMriakhR4LEdyN6jQEBlvm\nwcz7eRXVWVxAqi0S+MLfW9ggfyyPjaAq2QRF9C+bGlaC3CzOhkd9zsVhJBbV\n7DjfrKpYNlVJ4fI0/Avo477eLN1I1OFXSqtBXYab2JRbJ9+PnVvwVdzkvJTd\nzg4SaYIeiLsyE8uyD7lsUJcRxQEMlw/qBA8tvfjMjWSfgQrcTyrxuIMfxisL\nB6iAJYo578TgJYqZEDoMt9TRNgdFZ4m8HVDDofNpdFzPT/2ucHBB2lyAsDea\nTUwy7MMDr07MMsu/+Hedl9qg2e0TARWqhW9yZDPkcn8z80hiUyDtVVHvp5zp\nFL98F6+6nQhNd7OkKcYMeXHo/WtlR4bflz4BhAsaX03uRhy7jeVmb/bSGV6J\nq1Ev\r\n=8jjP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDtKklb3+0UmyS2U8uZRptDxbQ3lPAR2Fn7e4EOaLO69AiAQcL2hEQfmdeAHL1Bo8gg6ERb9qZ3+ZJP1yCs0ksFQCA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b99c77d5.0_1622056385493_0.7668439748561466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.0de82c12.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/snackbar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0wNZiGySdFRCODreKU2Dq626FilV2ntwNDsuwPShTK26bb2NcQe66cd4/uefDVrpVcLD9uGI9Y4YFHkrJJPplA==","shasum":"ba8777cf00d08f64af79fe4ac922ddf456eebde4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.0de82c12.0.tgz","fileCount":16,"unpackedSize":63370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4NCRA9TVsSAnZWagAAzRwQAJ1eyu1JksJRAqNtd3Xq\nBPhEDFhEq5q1ZPRdfLOCWSNdg/PJ8vbKtW3omCf7OO/PSE3YrE9lLHmfOOsN\nalGTH9RgXFmtUFmPOS3yLSImVK2FZurdLSW1Y9JeqWFs9n4WkzSI6pPg87yt\naJjVJAO1b0S1LmHML7Y5ywFDo6ZWkuYa981YGEdQNXRM2Y8q4xhd1uwVbVJR\nfD/jguQr/Lekg0cEQitGOG8UxO3hnd5kOPV3rLtBODhiTWom/Vn5aMZLvuc/\nrYyufID0vMjF2esswY/SlJmLB/0l23I+NE2bY4ZHLuWLgIxMqT59LOVLDoHS\nfORC1wtNWTJi6AqjF+o8zcEXd8lDFtuE4Bn0PF4tE7knPoidcgJNeaA/haHS\nW3Wd8wvy2/e/fOsDMP6KaH9o3iLAIdIXcb6+jLICizkvCU7AHYtISZ/oAtRP\nzVIV6iPTJ6bZHFc9nT60BUVia6YY+7NVVDHAs8/IGXHJmIEDe3n3cWut4OcI\n1OlVaZzIFepfBExj0HkNxx98yWhiH19UX47bneABt8mRtWBYfTcxSP26Gvt4\nI8/JxL/be7woaS1oYDkmo/VaJFH+9eolNPMe8MqdLOP3XI4MeGmH2dyRpSZt\nIVwNmnvCcU89jOVfwu4+lgVdC2ZooiLwntrq6VnMcJ87YbNYzDnNUKiVF9DM\nO7Rv\r\n=r40C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+bQYZYS09vcm8N+lc4KcSZ9hLZhXHTyLNUrIRRil45AiBtnG76LHyXBfMrc0iZBw9jWmN+v9R2mkmdIR0QlmbJDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.0de82c12.0_1622064653575_0.6905415079653545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.227a4614.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/snackbar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z5Bjxi0KSmYC5EuJvTuebcYI+cg8wplitFw9MmwXx08qW7R381Y2Jkpjz45HlhR9PbXb8Xqb1QecyDLUKFLoTQ==","shasum":"111ebb4e7e0a7eddb662cd2a1733e9ef23128495","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.227a4614.0.tgz","fileCount":16,"unpackedSize":63370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8KzCRA9TVsSAnZWagAAq9UP/0lTocfV+etu1BTzxw9K\nEemwsM6FZZfsChQj5tAAtnspodsythAmeLR+WUwLOkSDJG10tsUio71LDlDr\nsrsVRF9gdValZUbwC99o896SevklDa03mxpG/er0MCPx8e4zTzgQj3ZWyxTB\ngLDoCJmfdkjZjd0M6P1M7HiJhoJYW71vfzZKOTWLYEcs9HPb6a1u1WPK6leI\nerzetmad3zSwpZRfCgKZ5/F+4D8JnJx9pBxLURiHHZmbPl0fbjqX2/LLf3pN\nPQJbJi2sN0HqsxCLsG8Z/Ly4Pe8sGXrKsOSqVPCT/vQR8K44jL2HJ18IJ662\nhKrquEFQMasIa+aVRDkNsoyNxurUluibl8uLxoibLS9H7VVI4NT+ahgkVKlE\n6oconc/aIxqCj1MGSlZER+zmo/e9ZlBP3npCiIIH2TmdqOEKTOL80Q19LevU\naOFeHrV+TGep/Os7ROLSsP/z4XCXueZgiKNe7pxUhkvF49Ci4JWP3izuQIKL\nKEG5JPij2ZmKilnyEdn/2W3oQo0p06BYC5Gy52v7UOxrvnnfpQt8KZEYbmNR\np2c599Q9kAdeJDYP00E36E977DsLpma1DaONYV8GpuHilduz0nN7UQ3ys2Eo\nKT+PLtB07TN89bjsd0E0guvmrWiGYeZjtFGDMOh0T7/V7z5IN5UyZjRjUipd\n3Fm7\r\n=0al3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAuLfoTzVOVZ1nrpFkjkUBlqjo+bkZYaLwNeraEEzFVgAiEAhxw8q9aCeql/CEnh8ugE6notiFSRNzrnNM4PMWSkeU8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.227a4614.0_1622131378684_0.37089091775502325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b3d21d31.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/snackbar":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.8530d3514.0","@material/rtl":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g6AkXWcdViBcBfi6rMCSJS+a9gCNmkEapJQ+r/NjtVIOO/tM8dv1Mpllgdvc1e3uXUHchMgX6s8jU+Rjo/oQKw==","shasum":"594df6e448c3d75cbe45c4f6e315e7f9e8cbdae4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b3d21d31.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+iqCRA9TVsSAnZWagAAiwMQAJziGAaT5hHhqjxB7b4I\nHTvZOrIBYRRzOxingGdn/CknlRoQfTy8Y5Cu4stRsbF2BJEQfJD8L7/APdo6\ndLNswTz+H2BNaZdqg+RdtjMT06+n0ubT6Z5igPka4BTrfQlXs5j8Ygb607vY\n5oiBMAyv7pgcfK8z51rUWabk/KYKalTo7HiaAAiFa4AkHxFiF0dCW1bDw3jw\nWDtREtwcWLD9GCfztXdntbo9N+nnq04tfzJbv+EcKigHcPKpmbpEBjlEblCJ\nt7yOq7c39hztNAdOLr9KDIWyhZIgMS8E2n/cuKKtUUiLNduybzbvZA2vUw+R\na9wP8DVgp+jKEqj+mN3g7QDpPsBiySTMU8C4mVjDkiQ9T4APyGn6TrWNjD+R\nAKwZFRcfqDzIdcLdPW9Ef5m//+ZNIyNdVT1kk4IEhr9nl4f1ccCjQAXxIazn\n8mB0qwdJK9DTuNN/RSbNJC3wmgucRyF6ikRwfUGhWrkpJcCgtFa4jYvKm0En\nX1R6cdnidKP3sJoY59PZvwBfnKD7+sfkBTI2VlKS5sSTLK7OhlvI6kyVgixF\nX+vthZ9jLnDnVlgUYyVQWPrQLz66SB9hdO6YtqiauJ51iK0L0cBRWCYLbwyO\n74t5baIylp/EG+TvJL6R8aL8ccswAMQ5JwZpH0HJbEieATiHoOz8fd11eEY6\njMw8\r\n=P2Ik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH9h5ja+bkieZmCv/7UGRUVRzMgrvuP5rOyNbIZc+D3wIgG04OngTGgsXNjd9UYKpeOd1DJuQAET4hjIEu+8K83d8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b3d21d31.0_1622141098224_0.7254865315833938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.288c33ec.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/snackbar":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.00b5899dc.0","@material/rtl":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZnpLbIAMLd6sqmQzmUo/b3r+6GPvpOHYiMf6Ys+AHt5xVi7E53wEQ7lec32lAg38ll3jgmxZRBTWVg1JM1Y+Zg==","shasum":"37c28c174fe32bc3b367c136cdf9f2bb0df549e7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.288c33ec.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zjCRA9TVsSAnZWagAACwwP/i6vG3dqRsYa7abt5z88\nXLYPVZaP128tdSq8aQn/7jFQDM8QRMH8HzOwnnZStwDbep/vO6uPr7a7qRpp\n2VNaCLpL/1fa9GajTGyZhhG7WrWCjHshIXHj6CPb+OAPnx5NBd37Zh5g2L1E\nVA9y92/kDHKCWbulyaQeZTc2QsT/CUtOOTEYRUWcaQql5HBfZU9U44x34qpO\n1DPxPvOF0ZatXkpTMaUtAYtLG9WMvUP81K8mFYSGGefLDqOK7QhiDLha0lpQ\nu26G6TNH6ecQPqmxuLjqQPMLreAfsu6wnunI9XjZzZ1FJbXCgQ3njK5IWCtF\nTRtHn1hyb0peBDWfRWZev7XK/USyoFUbQ2jBV2FAQO7KK1FIjYuo/zRZkTky\ntIQ/F7cuAUV5tnvFjrcuuboPoDDQtfD/VicCfTQPO5xkcS/j8q4LlW6g8gaT\nm+96PYtPJzYFnqQmM555tYEoyNf/j/cd8nfy1wlm6AQHy+v4343F8cQh8wX5\nkIcGCgT1d9NT4p+gjOytKzaL4jvGRvcWkWO1O7FRKveeUdFoRmEaQnwhsWNP\nZ2y+a9LA35xE8ktI0icd7Mkz3t9RNO3Cn9NQajF9C4VwaG47yd4pke2mGHCe\nwqt/WcF0mzhJ3E4l+X8GFmPX/+v8p28+MRnXb49vrNJIm96DCJ5kOIPtdfNF\nPndH\r\n=loSO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeVXSw9VrriDXYBHO4X4H/sLDI6p95yfQY/FGpIlt+PQIhAKTpZzXjfQ7CEzvlRON/gQW0SMDJD7YtPKCA7E6HUYRL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.288c33ec.0_1622662371812_0.22540354887685687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/snackbar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TUOVajA/6MPUbzuGTLo8eDcVYBXme1qMFNYtqDvt5rhi3BU0T3yBicwtu7VOLGJKGzc9W91mh40cYQV4yQOWjA==","shasum":"2fa4da06496db2295d0c5de262d3b4f68f7d7174","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOHCRA9TVsSAnZWagAAI9cP/RrtZLagOTgGPPM4jjww\nUTWvFsqVN0e2pq75RLcy1n4nzElB+f9hl9L3sZI03+bRx3TAzE0ypp+F9//x\niHoqcxuN4UdFLvIcn3kHXhSY+o2biEWAmHrsyscZn91tW6Rj/Phl6vI6Nf5m\ne/pNEXZQt3vi5gluWrvgrnoVxFMqCqsvoZ037+HEBoEnsixNix1roCkIyiHO\nqfDq2mf1ikOAXeJRqH5Us4u9uADh5gxuapmDRYA8+GbWP3/UAFKYa3vMkx8C\n0wLIPXc1E1Dc0m2Zo4Np/s/Ff2p458o5m/e+O/5jf0ExR1GT+cJHM2Jo8Jaa\nTPKOqvmm1ECOrtbc2NU1QLFVXBi5ro+6an+71Bf00HuUUIJD0mJ2VyW0QB27\nH4Z4Lhy9h+wEy4I9XqpCJn53+jNzy0kGBfApNgF6NwBCX/bKV/QN/FqkqP6p\ni9KWXXRlQF2nBco84u9qGy2Ch0qpTI70X3bCrFSu0b6/w8w2BjYF0Jzz04W+\niOnX3wbR7bqbNAdPsdmrk5hvmjOvcye+48y21gddieF4fx7QD4qwZCrymH94\nEJWljyHhd+M0FgxXBQKc7c8nVSx5CPb4/QoZwHLX0AqKfdu8b192y0Af5yHR\nq6EpuIi1Z54cDHvVe7WydwNul5nEYjwsS8ccmdD/cK71u4pkbQI1wEkvvpWP\ncPs6\r\n=Da6G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgft31OOGgmQ55SuVWGC0knP75eK2CVxzxjPHjr7/gggIgKqIQfae8QhowfGqbP1Il0j3y5c+iNtvBnfV24oIT0Tw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.7eb7ccb0.0_1622750087436_0.08838157718121198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.7fcc0726.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/snackbar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m/tn+hAu5ow4sXhqhthA9tn9lf+YfVLjGgEedTL2p+T5vfTRVXAn7pD6EYT+wUzduy/dL/OxrWAMSRGtWdrPfg==","shasum":"a3513fe80d189c596d827a7e9c60d604a5a10589","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.7fcc0726.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2aCRA9TVsSAnZWagAAWSIP/2OAa8rdDx/qblN+NTRt\nrwOIBWLiAOLdUxdgxE9JQFC2jBxUG519VxECMSLPstj/RArSkmV4Moo49hpD\ndjSp/xi3YkfHQHFzjFDHUn4S049owRIiP4sXqvLVD5wn8bdRK6JY7MXOkUeD\nZMGXaKk9/r8hIgIm9VdvY2XJhpV5hGyf6fEYaAP7i2KzyyFIRQiujgTx9F5K\nFaqVdeyj2Jz9i16hp6zTPJs3EwZWoZDXzLT5YfxfJLkg2PYd1g3iDpXiQrLW\nhuFHAGprgpQGFSFCM20q8j5LT5NtLwqEfSr/p8D9B7ys5zM09o7r0hynVvb8\nwWV5W4YqcAka3bTaLTum4xjW9DLm7ET7m5/zt8/KbuoszwRLpbCKUPER/55q\n0dXDtSAQG8Dx+Qeg8DJ28V1tvORT+9uh4gMsh/YX/6/ar8TcfX8R/iVuz7s+\nyQZNEqb+PoDijUZ2yMODMZZ4iapp0zgR10Mv0N1LcNozM5jry9nutfe/fFjH\nBqO+mK2dm/PuvACTyHp5Ds2k3PAuj/+lXB+RHTdhc2Hugt0T2RjV6WeEBZqK\nN8+3Yo+dHQGKfUumLtWWVooFA40XegUb2j1YxBiDNRQs4UxA2EEQ8dmmojAd\n+/RXcIBQyTKKDpyS9p1V5dE4f/JJxQr4bZXevlwNi4bgB62VC/lt6veSI3SC\nHTQb\r\n=3Qnl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA2rhaFEEQez/aCgl0ZFoOD4YmUfULLL5xgh++VdvyVQIgOKqTKuP8m9omcXHYOfB9myPJPmtdoeAJj0pnwCkabAc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.7fcc0726.0_1623113114438_0.04071270917061254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.220a4e5e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/snackbar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2rV8Ek9Kc9FUPvD1+Av7cUh11aE+ZGYjLDtpK3/+gzcwrcbRswP+kU3H/ahfGmTeGiO/YfU7RhGChmnRMxdJeA==","shasum":"690c1cfb456496f78db633a1ece6291f44194c3c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.220a4e5e.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63CCRA9TVsSAnZWagAAPFcP/iXSmj3shWI2+URyUEqx\nG3aosE1LHYYC/YykRVzuhu6wRALzq/tlkUh5C3X0HELUup+gmZ4TScdlYJ1t\n9qajTQZHmC+qLh7Wt1JJpY1W2X1jXwF4R1Rsy2qTMU7bvoAmCg9avi2VChPi\n8SbH20AioOTE2tkIoqFp6eiH4lzOi5a0a/2oXvmGatLU1zpRy5MICrlpp6OZ\nAVIKoUuLGtLpzDc7CqRtjJ9jEHn8w3EnR+6puhvRZZzU1Ds1lkUAI0PDsm8U\nr1rUn1qsOPlCNvM0j92kQCaYuFz2J+3JbWQwXWOGgUhJRuzZ28+K4G5uLX3h\nzkEe+yFH7zuU8qiWnLgeQR3L5GMLMlDPR8gDLjQWI/ia25x+cXl9daDKA6ZS\n9X7zUeWyNiRn8YSBgcjJY+28i/eBXV/NyJ7YyoQb82Fw00bUPtsLzmRIUuti\nBrOHVgdaRHXuKPTtSaDww/HSN1zM4XTwbLkVtqu0vXOHJYXcjwsYkNsZCk2k\nblP0qHcY79fM9hP+xP4l+4t+uoBhoZzSaRLGd7SR8QZOBEWCZ2Y5TmrJeOBJ\nnfqhzW5aHpAbo4wsnVuI/EW822KXYDADfYhhOjkG2wRnNoNJ4RLC4PmMEaw3\nBqpDgEbSKSW1835c13WLZpBTMQ1M1sGTuHhDGbjGDRG5La/7/wTuVVQYhV7D\nM8L3\r\n=JoOd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi70oJm3pkCaq34hvAisEAdXqLDe/RrXImjY6ecRMnvAIhANmYYQRlRq2eEI0ebEHi+6uEIQVLCWavgBuJwTc/3Q5K"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.220a4e5e.0_1623174594303_0.8920711564262152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/snackbar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ctns/ULs3Qyby8HsJRkNHDhIah2wC4V4hMVnf9drkPbpfhSuEzB2zXBZ7BJoIlcjW1Ase4fcSRfA2Vb/jYbQSg==","shasum":"b27c398672e032a4419b0a723b82ad32856d7951","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":16,"unpackedSize":63358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7ilCRA9TVsSAnZWagAAk3UP/RiOA6MM65rFs1o+7VSc\nt916ET5jOtjpGDh6HGFxkKoRYL/9HVx15ygQGmT48db3HLAYdTRbXXiHRtIz\nM2+UHQA51xKNfqJ58am4aoSG0fvXQ/l0guqmNPvUq4Uoso8AHmpdDTyGOPIv\nkJkRYbUFdy1FOxwAPCduh3Ke3Q5bqxOWGwbw+7ceWOGS+K0b76Beo8KdZ3Sk\nM4ADjxNiSBLxYcQMYzgGL1kRZd3PmDePzt1spUUKMvsY2BemLiyBwkkZdv8g\nUwYVit/YWPXp+imC7Srd+LhJd2v3EEOLLzUFB5J0r9/EGVtNJzbjutvbbDT2\nftYKvtlpVFV98ibMOWsq5AisHP3ZS1GsfYl+eY4RBEr3Y7YfYBdFN/D6Tti4\nT+9LyCHQZxqc0I71Yvl+QRUm7z1ztnPP9fkCv+i59WKosNEvg8NyvNNiUHh3\nUo7Mvc3JaL2jDI3EHJMfEJCQLqSvr6Q/FlHHhcusG9GQ8G4oKSOulPHX7Pf7\nAvGbpNwBUL1tWFEQriU4pbB+eW9bSzJGiJmkZt9pvlHG2QoFTtLFnuTn140r\nfxkx/pZJct0sqoAcDAAgzxMJ7XGcNu5D0j3bzCdpVqTvB8BSWsU0F6rYsyy3\nJgnW0y+5sC34wppT/M0uH46LTZFjxNHsLUkyS+B2WoWFug4aTPGDtKQHMYBz\naqgL\r\n=a1dd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfiAZSLnqCpP+TmHa+JjSZzv3u9/AcPjR06gDw2m1qAQIgVslv3wO8/wWBCJfbNQUTmGlNw+YZl45BAwWJLFs0rvs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.6b2d6ab0.0_1623177381535_0.8390667589840928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.2b20825e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/snackbar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a4bxH3ZVYe6o4Hpg/Wa/6ZsipiE4LVm9x05VDtgvf/HKUT77CqpNt/fEo5dffSJtOdT8jpFD1DEWIWYSsVwynw==","shasum":"2c3f29659a80e3a85e1eeadecc3a3c7fe28ba067","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.2b20825e.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZiCRA9TVsSAnZWagAA5BsP/jzKiy2a2OgcgiK3LTMj\nDP79zTZcZpCC2CwiysUHMG27tLW55MXLsGdZksNxLVpFDGxqQc02Avz1eSjm\nXRBgXqDYA5aR2xltcF0m4WgX9hpS8M9GQhYnrv81C1sy9CtMzRE712aXG1eO\n8F5YxcRd+3xgQ9rLkznhzqvyx6rkI4AqAFPoCClYGCRncWqOlUK5sxcyIy7d\noiRwCgjA4rWclM352DYqhlmEilQZvJAcKHFcD9aoittfEk7ZTzcfyZIEKFwy\nUF/gyt8S1Nb6+wNUh2YQMPbwRo4dIYLsjI4FDrXO24kuRzTkkMAKI6jUBHNt\nHBec4indTS/PEO7MEBv0TnrAUxmQ2KXPiTXOTJfR/NGMIp/KJAzZ62Mo9m5f\nSfmL7Y+ihU5+IuhJVRVquJBX3HpJTtrvBxDid6FAsrtqlTyeWURrvOknQDv0\nX5RFWqt4NFFLVxteHzj4Tn9YwHA2M1/RH6ufOtioGsBjuCrguYuQlrUjQEpe\nmtYeQtcwaqdMpDyUSunl/Z+Yn8A9p0UXk4yA8EID3BIjnMUYNwd9+R7ZRO+Y\ncSnnh4SqtiLZbG7kpH2lBXt86sknZJe0u1C/s7BAOSxTuPWejkNAw+UbLUUe\nAjyWc9NZ4oOw/lW7sFrDBMEMMqZp4kXh725Im4rbB4H0kt0+NgdCMAKcwazk\nU2ev\r\n=5aVm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1CXlUp4CjkRNmhuWVRuDiCzBX4SYlTvYq8z8rMmgqoAiAQ2c+xowlrdQOug8Kexgqh0wJT92viUSQcvcpE/4sXPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.2b20825e.0_1623455330606_0.6499628404670159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.e1511867.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/snackbar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tec5CxCkJDsmpx0uxRYR4J43U0OTT8DQQlK4XevvB8tcXFwENzePSspHecs4IR41AyTyuKtZ4Wcm8I8pXtnF2w==","shasum":"c0cd6d24d54ac54ed7156e3742ff7d164a4f5d08","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.e1511867.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZhCRA9TVsSAnZWagAAt9kP/0yoyNC9ThklPT4A/WKO\nBb1fCxvX7x2EFMbUXVuLgUr4bztpXVeKj6DdlCHpHA2m6qcHln+jFT8YdL/u\ngF/kJ7uMLwq56cMabnozK5B6AK8Ir7HAYvNqpSQdUA6sNuuqa73ro+wMWeU/\n38nDlC863eg8xKFbm5K82b6z+NKAUYATh5WtnW6M3X2Nj43q0IvPf6JsAi5l\nqtGhksAF2tkGhrSEpRoPCzJC4X9h1Ad668ytCj4+CtiPbDo+F5GQOLGPbkEA\n6hqOLfPttxjbgV6PdI5/OE5g0ZqMSNpqBLyX94l7VWxUrxyjYneHxtL9P7rS\nXF02t7/W4vQI54ESh5BttJXdRmX2Z8orw3eIEFjar/lQgvEzp+0UaWWrts/b\nfWFMw9MHpCnVaWTAcsv56OgGC9AuAw3OYFq8AzG/bZlT8+NBnGYVqpysl40y\n1blVqfuWjvOExA70tO00/OFJHCg9eiJXniDn+jbU9O63uEXq/5jhKIEwO/p4\nu6HRCh/5Pb8KJHdZAC0YMbCLbXAKIPv/j3eGQq2k7lwV4f8TA3JXSkb4QoDk\n8sLk/l3O9wHo4ZFL9ibn+Qqt2gwNGw9vtisZIx87aVOBcb/B2uSpwvYauvKX\nOIpUe7FfoPK9IhXsDynu5ml6U9nh8/8QQns3l2iL9MzwptT4Pd5lgeN095T1\nAv8S\r\n=Pjww\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXNn/GnSfxZBeUGm3vf4ib4JTJ2Ncq0E4UWLRGGrrh1wIhAI5zTKKzQK4pL3Ekkb7CpNTY3cvmCeF88mcFIYrXg6dW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.e1511867.0_1623459424843_0.4363013026099012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/snackbar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lr31zFiy/HzZJiI+vPUFbJR6+YsUdAe5ixBBT6WeL5rYxaebQi00v4YQ+Hw1/+EROND0HkBJNsQK1KHkTSc/pw==","shasum":"021f8deeec1e11cb7301c935e31bfb80381dfab2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTHCRA9TVsSAnZWagAAUf8QAI65dCGqQ16tf/LTTa3V\n2MpmGIq8codwpX5TF6lN2NCzorCTmqsZAJ3ho6XBnZE7ti++gvy6uOmPioXv\nuQ5DjCLxOcyvS2tuapbAEzl1bWIfrgMLKxtUeMIS/Hphje4n/LGfSW9Zm7jc\nPEooRQk5U3j2v51Tlgb4qZ/BbKlS6hkQ+eO83ZT9LyaHJb1SdkkyYAWOF6TA\n0mf/2OHsDcZLPHhZsVo1YFm72//Js9MT4+4SqUC89GuWwc1KsEESaXG3a+e8\nr6DfZb5f/KRKigKsOy4pR79XsJgZQ0rgj7/uL3v3gAOMC7lqQDnuHG4hBM/F\nfKOztdAJUjjIvnVb0krPm7cMHTkk834K/lPwxCPYqqWNunF0AylpNcsyGX8E\npuuSqw+8njAYbKJROrE5S2u9HOEn8rdkgrp8UVgZbucdUMu3qjcHID1BD0zV\nJQ94HjkSEpSYfT+hkToQns5xJ7UihgKraxF+MlUPRdiWQIpat54XpJ5UiHJs\nwIkjvoDSFClMV9kQ6VFE+If+QkCbA8/Z4MUrW5wlnx/LnI3//BwzmBVKDhv4\ntSdAJ2cebN+3XNr/1MaBScsaiSV9hqtVmksmRZ5CcnmwP35jmWBtzUzZXFL0\nCxWj1oB6zHD5pPkGN9YQqXlPFnCVOXbFtqBj2DB5lPK0ApoCAl/G3Yqyx/cg\nBxbZ\r\n=LWms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqlu9ngDwrK44uyyjQRDgMSw3YEzRLPGcMQ0M3kvGkBAiBQhYzzWxuAEBVTiK/xKtIJ2pC8hBHcbZnfolH42UFeKQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.ef4a0c0d.0_1623786695167_0.8847218269983439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.573d8913.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/snackbar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TZvori9VlOjwh+ldv/o9swRSRykhEEPsnhMYt3grYRMRAAa5DRLgGvfi9Zi+qcKk+EBN0fMDdj4Mu/ZmyGO+/w==","shasum":"c78f0dbe857eee8e9fc696388ac07ff1005fdeed","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.573d8913.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSujCRA9TVsSAnZWagAAi98P/02nO0MtBaK5lE4pv6ku\nRBmvNjTlPCj8bv5Yb6YaDM3UkYnh3v7ElfKlOUObWhz8Jv0dfSfzbgKlGSH6\nMUIrJ7tOeu0dDp013RiZXV8k6r5XMLV8C2HYP7OLyTN611XTstFPsFdJslE1\ntHUFs9QRDsykFeDFP+c46yoGDvtPYQXhXNGPp34vu2Q6iEL0DkR4AqQhoCia\nHeVtQmm6Y0M9gNH4Ymt8Oyj7hY41UgP5VFJf7jNuYVQvYvM5jphEP6T2kPYW\np5DYBmA5sM16C4T4AiDsqEAao/Ms70bdvRJhdhDoyawqVJwaL4gfffrrV5Ax\nnqzT7Rmjg3O9HuAHMH9Uw+e+surEohHiU/lMBhnjUruoAdAgGFpDI6RCg0ud\nx0PMYPTJ5Hq5ZPP76Z/1E5Sf4tAZ5WtTNT1ry25WQh5WgXJ/tqzbPHc5xDVj\nizrGgf2NHZvOnmQAG7YbZPKPqna6aePw3bbUNwc9BERzlfmvjqLFb6OiMa2R\nWuIFnuXnmRHP7rGei1rD6R0IjQuAwVveuyw7FZZnaoQJ4kKbqECVOTYHEQvB\noTmHm0Ml9Yv9Nu9vgMWbRGs/fyM4q9HSvM9fswUioZ+HJb00NMPailEAz/t8\n20Onrv9i61ZSB/ADtadnIbL0EiSlyWt2O+pvfSXt+ntQuK0cl+FuBVUkkBVN\nBo9l\r\n=6c0W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLbcGINtiOyidvOHREB7MRI7nkdsL40ThKfq1I+3tdTAiEA/74R45l/eh18FP4jwq8YvsKaLcA1PhLQ/1kUhkDlOW0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.573d8913.0_1624058786951_0.013252042618403514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.21dba001.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/snackbar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FytHy1oXJnLt62eVn65W0LPpb8c2AhP0Us/L+BQCQwzsqkrtnLCyHZHQA1th9qPrHO6LYxnLQagx20xkr65igQ==","shasum":"5e450d54105d6b750cc1d5b155c2bec011fe831d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.21dba001.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdDCRA9TVsSAnZWagAAb8cP/28jiwYbwhhHO2jOmSF1\nyyrZZvZhf6KUNnip79E0u7wIpbazo1xBBuivRSVOy4qZarPeezCYpCPyidLU\n5t1ZaTBbsT06lwP2zqNG3Mbk2Yqe8w7ArI2wO/qYQ7H4QJ8LrtY0Xo6DV7nF\nUApp1qfimCmX5VHrRUW6LpFhn910Xbh4nEAygedidbbpyAO3rbzlzSMFKsEV\nJDqS8GBgg4oyEoew3diKbAUXJ8GjNxdqJTmfl6YSv9CsYEZ2SCw0I0MZfQDm\ngva7kw5aHjVxT8qUZzwcBdGHHLsqZazCFzW4e8WiaycO1zGQ3TpCRfUpteBL\nJrBAcnHAwGFCkj1yvCzAIzLF4UOb4xISQxNbpmkVhqewzfTwqKFffBZYCU9J\nIfS0ontw+9A0Tqy6tte/4KDBBAVOsyQFJHCKurd7YLJ5h4G8nRiaYc8aqma1\nwiIvBlOw/s5oxm0rNE9nPBUl3xF6Cjl7aoOlpxLH49dcReLn+kj5P26X3AIw\n9nKm9zRf2TWFlO54OQZICeg5RAT8j0GeVwM1Moe5DeV7QBglMJR6Q9xQuME8\nRDyo3asIkBgRdNvDtW9Wxu4kzJv1MPwVCaRamJNZL3sr36XL/KXZWehbWyeJ\nGJ46aPRL8iTYEqCtygSH6TEz83/7Kv5PkuzW2i9dUla0aIphwv0cVWzyBojC\nW+yH\r\n=rupt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGl71PIqkP7uxyVChoqvtdA6C+6PJH1nLIaoDhIet1qqAiAsPkDJWX0l2TGP/BOK928o8jd+r/sCdEBh2L+/BRN8Kw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.21dba001.0_1624311619551_0.8908855810989733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/snackbar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1AhXCbGnDGtT7qRQpkqTlCkEK2Zk1yR98fOEn17k0RYNVIYpF96XyqOnU2REs/MdcL1ynRK3nMdplas7ZqDTtQ==","shasum":"b97abd421fba1f976a10d2b0424c7027eb0ea010","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q13CRA9TVsSAnZWagAAyXMP/imz4bQM0DKpDtBPPSw6\n6/gFqcGkiPFWuS0Xt/mq0GtDGS7pehODbV7XoaDnOg6jwo3IrLR++Oe0wO8Y\nymThSI32FnEbYVVzh9v1Y0TMKIZy3vfmNfMnkVBfVmmPkGhzuiuVTUWRCHTs\njNX8cfkJIgKq67rW4UsEpdeuIJTXHdq+m4uM/zhjPoJANFje2NdZQjrkT++Z\n6257RtWymjM1QVBYXc/DqRRq3HO4ohdysvedNfAZKsKg23ndsMn0Ge74vboF\nfONUcGn2/Nu2r3LQdxMRu3EHv4fV0+5MHugdByjidMppHLDIQU0ZSvQzMhLA\nmqlldvo77BSnpsipYMNqWoAAj4cu/jKvKjtQKlF5qiP8ihXohlGS5rA89WFe\nI000NITleNT6Q2H6YkHxS1FU/TPHZjcsSKatMOe45VuEjaPfcUrsDbcOtGBI\nKhnMuJpCly4QYDmTbltCl41m16xkZfU6ir3NMEA3GKNzh6Cj6gacyZ1yZdb9\nHiy5UYfgZJVaHM3mEJKHYrgCXqddb8liWdcFsAe8wEOGi4DXpyA7oK3AVwSR\nSw4vEdfkXUpY0gEFlQxDlHGXPATHWlHqVB326RpQ0s6aO+QyKms/rEcNWfe+\nzqtPT0bHlPmTssDyiktegJygc9WpHOtUl4+7zyeBqbHGDcsR79cbjpeNZQ1z\ncyQw\r\n=eOxJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkwxOWRjcoAhvgly07ggTpeUP1EMHkf9Ffqy7uyTf7UAiEAuJyaarr9BhSS9eZz26QhVX+c5fhFtSbODlXffhV5/qI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.6f5bfd0f.0_1624575350984_0.8754521486181097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.fd8360b4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/snackbar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EltgN6zRN1jerpdihEHeZQTmkAWRnJcfxh4G+Jo9x64ATgSFBm03E1DNcKH1PtgvQSJjQfCfZZIFC/DzIrx4sg==","shasum":"d2a6293f6ec73d9d8c26d94d0e1b84e6b74008e4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.fd8360b4.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inECRA9TVsSAnZWagAAQKcP/2TEbxvLoJwxeuY8RJD+\nh5pXNcD8fZrO8r/LFdiup6s4pVal0t2VEQHndBxMGgU7kPDx6zhtDQ/aSKhM\n2BVH7eu9g3bO5LfWfE0rGmlifSxRpWz6+dC3LWX76wN2k8d4JgRdcgFf48gG\nFLd+JPG9IgfNzOfqKvxam4pbzKJvpCrVG/bAwKZmmGiPdDz9RR0hi4o/q9gR\n22q9t1+qrMi/2FiscgD3XQ3M/+FoFZ+Mtg/57YoMgMRjHq8q15szTqqJ3vZ0\nGCl1iXm9ApRwN0QV7Wh86xs1BODCslmFA/GDDurTXBJMc+MkA+MFbzY1k4q0\nzOVuDBom+uy54hC8To9cCnuSOOMh+6RwYolRXAIh6dmHzfYIjkG/LoWWWZti\nbO2bAj/HT8UDVSzBbUvykzlL9iu/ramalq5GvQiFddmtjYCUdYk+peb2liM4\nxRxw/Zu5FTz5NRvvOqwPqC2V+b9OiyXlg9cAQlyPbioCCjO2dQ9fIiHCtaXj\nDlbYbgBOy1Hqvhg4/JGQzUDz767E8kI/f+kJSkY4A/kJzCKk0Colhil1di+r\nYYeMR6uQlAo6gHz2jEsychmhUklruRpNR7YEYzL00mguSxh4d1PR8JAscWgL\nNhu3a4BtiK9LMV76veshyVar16QR0TPq4Gesphk15NI0/QqcSQ4Zu+7QSrS7\nueGs\r\n=XTVX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHpoHruGCqOOQr3mdc30oiERcO7fnnzjfdGoKmsboBigIhAK4Es4BQ8IIAwm4SLIbF8gxPMBSN3qZcpAjhMgSxctrS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.fd8360b4.0_1624648131762_0.9882692557324089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.6f74432f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/snackbar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H2O0dpNxsQ0HClWLCJJKHPZIX7DF7n/Vg917fKUJhc5u+YKc0p3lRvyNB476AHmHr75G3QQlJZD5Opf5Op2Mug==","shasum":"122dcabff073eaf90db14d8ef33e487be4ba4d95","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.6f74432f.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kC1CRA9TVsSAnZWagAAHW8P/icQn0nS4D0+gJ8m1d1P\nVk2VdcbwZIZ+QVpbgfwPBGp14VfrBrGtGUxEOwHqz4EpHGvAp7X9eeajIOh6\naGdV1klbjEqpy6JuP48hPH1jLtZICPrtfexRavmqrLDJIc2VIqZZKVSld+KQ\nkSbd01Av5IMz1gqViQRiNxOvmORVrB3b4eKUGPZi74n9WtXkuEfvfUpX/Jx8\nIfElzMeDDbwcUD+02av7p3dYsQk+0YlhzIGjBDBZbFuYg6dqXc5C9MpQNmxz\nw7KFoggoGB4scntxyGGFdbz/bA6pHvHIW6ZwfJaDfDOtIAqcaNE1O2+Pvd3V\nsEBaKrk8b7ksYQ9/8+p6yzN17vSM5djpFQlHwjS12uaUrD8jHRj3xotkyLww\nySQKEm5hCymi0Wcp/k8Zk3I3MDU7QJHLRlzgBjlTRYa8kz8fTMSHehneiF2F\nPo9wUbkFnhFptADkDESG16YvhR/rTimhvyJoFFcvFAzqq4DX+WM/0xiZriKy\n6CdstG0ISefzn/rv5KFYttNISOVjb4+Lt5hwcdcsk0x+eKxskD6AxEHlg0Eo\noHO0dPD7RSJJeGVDv5uC/x3dLLtf1g0PVEhXzb1FxaqBkgqzsf6BBHIHtJM5\njELU+FfFljaWIr/K054tP/DRl6euk5sW6DivocqQcqU+U8uvaDz4f9VX/fH4\nTJ0a\r\n=n1Ve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9PHVMctAB3rd60nemNr0mspoYBxJP111ocmJ6GGBTmAiEA7raka4QYIDVF2417cQeL4WID0bkgR77hbzhXp/mO/TQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.6f74432f.0_1624654005262_0.9439879759656595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.b62f901d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/snackbar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+72Rl453mPid4eioOHSCQRUJarE6f4jhCryuIVfeyRRCKmVN7fhCGtOwHVxDlPAaSv59ba2RRCplfbj8hyFJCg==","shasum":"d0623bda9f3fe7de4b276b9fea3df769ab31b8a0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.b62f901d.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXdCRA9TVsSAnZWagAA6XUP/jcovYCdykraGagl6ygl\nLE3V1UjkOlBwNUzgYLlN268a9v4WeD+2bNPxHu9z8qx/TxJzhCs2nLY1BHJ5\nPvjCubdom9VLPVDKXkURrhJJ9JKLvk6ssYbvlU4kcARboSWJ4QZsqbN4h6r+\ngdw3ONIDOVRhAtFPAQipK5Aqakve4X1hnenOsqkRUQy7uuPF46CSXuqn2+Xy\ndb0Wwl19S9z8CX6FYjbhMCi/RNW1RzQPOz/zB0T2gDXV8N7CjlPwfcFni5Y1\n5dl+VLXEef6nkU9axvgPel+XNSvnbOidLJVoWUAkRC/1dciCmNAAPyYcE5zj\nuwjJ2c/+tiVhO9hokSSTw/V34tN3hKYvgpQjQe9k5zF8B7r3VjiiF20PIFzK\nlqRmeJiusnJy3z4/OxLyOqv9moBMLaPrso+4/1xdZ32KGIwaj3tawInyMwHU\nvrHuM+778SoNkLdQJhBYT4zBwcdcgWIvANY49DzVX/MOjhstAX6BmikemkoO\nECJJQ3i9CLbB/3HYIUXJftqNlya9I+XwZarwo/c77OlcNT9+N/E67k2HwtO4\njhQPnorLE4koBE7gmqjHHHzDLi25Jzcglkvn0c9fbce3awpOEnbsPIcfm7Ah\nP17XpKcgm6MEAZcsm259A7aQ7chMEDxFafh/dRZdyxPoraQVRod++a3hzaEY\nE9i6\r\n=rTWr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9Cko00AYogTtAgg3Nmie8ncVrYKf3UWO0SN0zc8UWCAIhALVTLsdC7Wq6aJwh0jBpcjxTj2ElM3MYcDiOPoUGWU9r"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.b62f901d.0_1624659420669_0.29907836186717796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.73122cba.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/snackbar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mIlfOiQ42luj2Yn+rx8cAdoSWg/vWK8AVPE1VMGEDnlmmynbBPLUUUt3ygcIRhE8SIj/6Es5cClMRQ4sFJAEjw==","shasum":"56f6b132ca22f873fae980c6189214947e9b93ef","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.73122cba.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Me6CRA9TVsSAnZWagAADfcP/jbgRssViO50sjxU2fXN\nKYkwdbVYt8bcFC//tqeY94tCPIaogjAAaQyD/dp04TtDPE2bB+rL03+0n09x\nrVsgnfCLzZKK2ihwPz7nUdjYtS1x96le1AZFG0Usl1NC7rsSQMMjnzvsqUzq\nx1gv5sc+LBMuEdrrcPKE9sWR+3ScB0ZkfHDoqU0AX6+PlKlQVqCgdohqTuTR\nvQBZD6jQxNyU3AfFRLWFW0dS9D2sF65zwkzaDrGdfpeeWp0ck0lQwfPn0vEb\nI00fQavKuzy/1ckCzL3BK2dJgrieYikyGa33j9N4a3VSRm4/dUhYSkpg8G3E\nQM3MRuWCjmAxyhFsYPVPnAoTzs81MmRvigv67+YMA1NMUJQB0XoeDJACQnmk\nu317RqPv91amWYZ6PJOmh76JQG6IOkQ4GWgUqfU/EeLFQS4rh+igzn37ctfR\nhrp64oc+X1z60YZ9BNvxPD1XQW8RJ4L/ZvojHPz5ho3DBVACPvTiOj7Y4gVQ\nc/IarY1yNFy6f3kwKdBlKExrG5sam9c6FHXfZk/Uj8wrCS1kt0A3aUP7ucxx\njzlIlwUmil1hUTvjvu4Y6c5wOk/1GVzF4z2YyZ7NEpT9sg2sGx4C3mndz8Uw\nYujTMZ+yyvAmiyl9dRHCIE+a9dqadUshE6aTB9PtEQZcPnQLGThYoBnrlwIp\njxBV\r\n=U1Lr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExYd2xtQVqr+zJA2RLU83+ib2w2hHPtXSyYujfIjqq5AiEAtzeqp3dkSaoSGDHdV5GoSkiwsbBVncwiSg8Bnkd4p24="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.73122cba.0_1625081785917_0.26709909171349344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.a6912af5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/snackbar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+5sWROqCoxJuWUQxGaFttxswIOspXkjhVYWOMyZMn5jJtubOH71gc0hdFNhWRupB4OEA5FA9r41aCFvDlB8OOw==","shasum":"6f5de8b38521b80eb2511c02cb0870d24c60fae4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.a6912af5.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jS7CRA9TVsSAnZWagAARe0P/14gLx+1/Ms0Q/OqAL1K\nHLhw7R9EbylGlVH/X7hSUKSPd3nP5Uwq+NR4itJk+ncSagyA5k1xGkUd/pl/\ndMMLr+5WX0qdy9JnsoBcIYkPaweXxGnBUmlR4pnbzbiAy/Z9z7woIq9fjFCA\nTfVNlikBlv71bZ96ofjRKJThuMhLzxtdrJhaLd32W51WvwGJxCQPhFZAVfT+\nBEdQ4ZuIjuliR6r8Xt3H3R83lcR7h9owm17Feb9T/Md6/N3Y91r56C+uxZT6\n4PPjrgK1hyBFTjJYm/sOOPYgp7gCjuFBgB3EdxwS0fnIo4tllLnnG46ySWHo\npO3sYLbdaMsjW0FGP3h/F+Ow/OssdViuU9HSHjrfvUIAiP5TyEg78NeBwiMX\nLjhy2rfqDLqwopnjDa7Kn7waAOuG8T2UWtqgUOG+i1T2RX8FCJlub1D8a6nE\niiCas0qjG+woy+Fg8BYEu3pD3vnWENVsBZ6Y722SgInGWeN7HGgL6K3NyRFi\nRjI2IY6ndoN615/K9s7sZp0IX8vMfSgg54hlsAOrbKRbQfmrZwPlwjQRQgO2\nZBxkfiGLQiXHQ83GVxG3/KG76pMEOWiTmHn4ab8JvjM2TrU7lkgbwU1/TU9q\nC191e6LrXs40Zt2fONmMIWuChrBIMaPe7s2eH1L1iKO9vODPu9ggWYQbRJgu\nfCMK\r\n=rkxi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZAmz4jNT5TfxQdz5hb5If5+yQsM3JkdKLIh4Wr0q1UAIgGj+KN1K8yWHyft4m9qtz+Ecsf/9xdC+bEDRf6Hv6HcQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.a6912af5.0_1625175226561_0.40241217078654934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.134f24bf.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/snackbar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YiP1j9gLkAZm8mBAdbSMoaxGXHXD14++CFSlHp5AaE2omJsFA5J4odf6p3wp+p57K8gSIIGVa+7xl1s7LDaeqw==","shasum":"d92b1bf5795466bd984df6cae342b88eb48883fb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.134f24bf.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJnCRA9TVsSAnZWagAASo0P/R8haq/pWYF0RPUqLGU8\nV7jiFm1+4PDLyzSCMQckikgRqfxrfIwjfH5SmsMmjJtTrYcVFyZzGFWqCRcU\nHx1jymCg0gogxow+y4ffNmvr2WFQqLOWwa6XcLsNnAX5J48s580xWqbXfwQ3\nO3UZuVzTgXZgsMm7M1rGOSNpcQFQPvOQnVZ3ZU5oGAbwnUeqUWYcy3VxpzQB\npcD+QF66pFsUqR+5pBNgqPHabYp1yaABOblDIEjbiEllGVl0K3chqmL+pbbh\nstWWgI0Sud8I5Igmfnqs7FEdn46KlwdE/LSx1QFILWy5UWQUiqjTjsst4gTd\nm0FoRA+BBBK242ww5L+PHt7HzWIC0OXriaOtUCDu2Q754QhwxqAosOy+xS2e\nTdu7I/A9NhCFv40nDtYgBsX7XIL3h1xzdWr9ejc3BdDMaMSFmq6ATp4n1FG6\nWhXHiwjtLGgjij6BUinKdcy7ARaCG3kefhaDOWq4tn5Qsgrl/Flhrbikj1KW\nfb7fILvdsDy8aJnG95wmGN6dEh0Et7gaNtj+xXqQqwyxj6CUjobVeR4x0ScC\nI6ops3BjqnM5vOuM2nA67CAAlepYB0U/J0dEjkwEFhyIQCvWlZ6rgtND7gj8\ndmmK5W/XOJOgsqVN5s03mZ0bWfqSfQaRTxVQRKNelvlEAmh89W4p8nb3lHMP\n6I7R\r\n=ODNI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9ml/3SZqyvfbnRT+0w9ZblRitm3QB/EfCzFXnrHuBSAiB0fQbIngEIn9kqd0FzeAwvvfnZBQnDb+/v1KufQTPgyQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.134f24bf.0_1625178727188_0.06834701345475991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.1debb78f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/snackbar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MmYLqSb0R/weAK/mQytxYEAkWgzXcUTh/zhPTBNNYoT7A2pG3KxnQRtRbGLqC8scd6J4cSGYuACBU4F+4nKc+Q==","shasum":"1c0ec25d82625fc42921c4d5e4c2adb7e333ed03","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.1debb78f.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlJCRA9TVsSAnZWagAACFYP/As2QyNbBRcCEbJGRAwB\n66JUmlPwVMCelcNVJWmn5BeuTinBmxRJv8Ep60kU/viKHd101HBTw5aaeUnI\nrdLKg1Nn7A+uOqZ0Jw9b+QLjwkRtYLL0gXsdTSXizzthH0ydxvIZ36FGTQ7a\nZNxzly1MD5CeIIdxtRQbN81eSHtCrzKGNRjba1x55kYlx+X/cSfW3MELHV8o\nf7VMwfKd0nRhLlJh8IoTtfDm4FcOoZS3crbZWIrMAIrKaj8jaUmpuDxUzEtJ\nJBby62bawcl50o0PbxqiFyrnBRDRqkPBeBU07tZ1K8twqSfpZffFcJZig6Iv\neKjN2hbssUZYXDmyGa03MecdqEmbaBBt7aB1uVZh+NJ7163ipSAHAr9lP6q9\n0nxEDkqHlJLwKP4d806nQGMGQgECmNTTZfUUIxrIYNHEbdqhby9eYPKLr1SN\nRW8LwZLfFliiW403IWRsY5HE4MQQRN6XJ9kLEh7d9RyPfezLeJlKnih2EL1P\nuRQGQ5+ZNy+rCSs/huPidAA7LHIA0om7/+CEo46pU43FBuP6WM/PUaRN+b1+\nLSPfXnZzndn3YXbw25WRA8wyfP57pya8O4AK3LDl+p3MOe45DUM3ylSk27pj\n37sx1Q6m6p/FABVAkRaqe+v+zlcG6uuptGldZwxeZXyuNfiMDfUUYd/v+mfP\nK8tv\r\n=/Bcn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgc0AZI904mssaXWQOT0b8dARiP9TmHSFWZCSJY+nrUAIgfBNPiDYnyXwZYpz36EPI+e1vELsrV72M0XZxwsPNW4c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.1debb78f.0_1625618760745_0.9519979215631746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.d53edeb6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/snackbar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bwTLaq2AdJfWnAUK7X7K7D0qDa/+6TBFkX17iTF4x5X6EvJT7gfIMkPwPtfxxUg6sL9tWmejYfMDcrBjoaBO7Q==","shasum":"db485421a93e36b28411b5786988fa08e17c4701","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.d53edeb6.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2NCRA9TVsSAnZWagAACsIP/iQTUCPXQGg3z583ZCyq\nbjUAaIjDJ8eD3v2ulPgfgVU1T7xFB3lQ/rHdNNC7MiRB2APUaBv4DRnpzbC4\nkp1Rv+6HfvTjqUwrAMoo/5LEygfEC3EsTd5VsTO60WSE6wIk/hwEQAQe47Lp\nTNt/mDOiAYdnE54K/vlzj0dPV5rQpVvqpLrNTdUTDzVJQLWc0wVRDHJBecdB\n9r6xG2PhBTODQQrOLLzL4naKqsTNAlyiBvuDUgD3KRFdgSu9NMHtcnO5P/tg\nZgZupFUo2Q0vqNm3vvRfsxoTcnhpqN34Bn5GhIK58/GSL5JzdQeLAEGHl284\n8fBM6LU+o4Etp6Lqqnwz0GlO7B0WvnFtc4QcHLvcI53mLJYrv2MLT1Ksbgnd\nVv4p7RtEWCKg7e1Xv6ewx5nGebc8nj4H9YxyQnyjC7dROAzP9GnlD2jQjrrj\n246hf0h9RAc35B/Gndr68aIb4IPyaPi5qr2ODvvbsXM0wx+Xl6+4cG4ayYHk\nvokghge/zIDLJ9tn/CP4vWqVZNvQrTlGqbXES1C2HUxqqfaN10HhkNakFR76\n2JTMrGJoj2DeT/WqTW6Azrf9LheJyrs0ddFKJMM/Hktp/07NmDM7ytstGWBH\nPllUGx+wIUxSAW0uOoSXB5d6GwjNQBmZ+K+1AnJXEiPQ5uIv/X75Tso2TZs0\n/sqy\r\n=BzGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwUT5zPEbrJkkEoOwnxCzEJksGUizAn1aB0/wwFS4qDQIhAMLz0neBesBLo0/93Ydgd30EffgoN94Zfu71BlG2LDys"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.d53edeb6.0_1625677197166_0.10515232178029366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.2226489a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/snackbar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aViCIp3lsPSp+QfldqRWc6ZgCbgn1ZbKEdj2c0BDqoXwm78ersQt0WsmsCbjX1ol78Q08xzVdnSBN39BJy4IHg==","shasum":"64b0be7579c0c5e1880cc971c1f5fa1b211a0dec","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.2226489a.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1tCRA9TVsSAnZWagAA1MAQAIain1XYS5HZq2ypQ4AA\nNeAeMFpeGPm3HmimS/YeUIrqhQAvZoRxyfeYLPgXVqBrwWwa6G6AYMRE07pL\n7RA0XooNeVuRsp7+OqnuPno7rJFn4Wq7TzTGg7jJEugDduzczlTJjQEZaRsB\nmX74LH4Te8Uq5P3GbDjK8TVpjgJNcYusi40C6cHpWjN4g3MiP8vOmqVFFIqn\n8WOXti/rgHh/1pNB0QeaCdxyXTUGF0LNk8JGeD0mqGF7Pa+glWy4RGSaezZQ\nTuimEv8fZULBMrCz48N80DjaA1cK8igKPB6642p0L8VmeM2Ks7dBIlm0w3HR\nvrjYB9ifreRSRkX7Q8QL3Gj8F7NzAmZ9s7ukTwGZdsfl1pRfCnt16x6MpLuy\nOkD9RcBg+9I98NrZ9cAjqotq47xJVfuDaPGpK0Sa+Bb2F1WKAs6M8Z7dQhoe\nCLhOFQALY2IggK9M9MIrPaBIVO4dNj63jZpAJnJ3YWlN3UtBzSadBRzRV9UY\nR/oX+dUgCRYf3Ty7SPQg1vE0hTrgU0UPRjNVtGdLa4tNYHijLdDeUjTyRge4\no0IGoXjq35YnygDd3Cat7h7ZLuSef9iQjgIlSVp+RE1fztQtoN+QhNnfcEDz\ndpmVwF52llo+JfgS0325FEEw4B1E5BtAQhS1sZTd8EZO9p11axSe0ku3WLsd\n2AGr\r\n=Y8uM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChh4Ar9Yo0IgcGwgwq8u3eXySaHmEsg/Z/HAGGbcLyEwIgOiST6lENmesLAZMksV1SUqScB/mE0n7Q4Ez3gPz1zsM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.2226489a.0_1625767276544_0.5471860987189114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.d4801c11.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/snackbar":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.adeac0549.0","@material/rtl":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-466nNkS91oL/DUbUmhOQ9ujx51C5NV5y5YwnXDK4zNPFGma/XX+QpP/Qi3x9uP84fUEZHd9GL5Gsu75rlE4HhQ==","shasum":"04d817ed4e5ad4a0fc45ef7b2c47446c533a09ba","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.d4801c11.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nWCRA9TVsSAnZWagAA6AIQAJDruQKYP76jRWaemo4P\nb/xbGSPE0OkBIR8sDRP+hRm3xSMRWVUomG4WeOq/VGme4OjFHBKLanGXJNMz\nBgCcboyh7R7VTp1GcAK0wDHgnjNqgjshxelQzg6wSSYkO6giKfQVXe/FBwbg\n/gCE2roRbkRWK8AVyy7jXqRWJusL7+CkhXWV/u4Hq3+Pr5JNmpNZ54a2zPOi\nsZ7ZHRwim1uUtaunPFGMvcq5bI9IGuwip6kLgfZhj19Uu7AzJdXAiKLzkMC8\n1XW6KWuYNlB1oTCnmryE3CCVPiwG+DnFgrbj5kyjoBhfSjZkplJmC9RUkXLw\nssLZ5kjMB41pfadLBK791gRO16wom4xyF7BL3L7ZAa+c1Pax2pSKwSpR+adg\nep5acESWin2w/ISTHcOyMhZ784Bcow42ZnlL7XTmHhb+FAg3twnHTTk7qb7t\n1NRNssMfPplK7/n3WELz19GRwPq+6WoHxO5ZANN339crMx7XQ04lr84EMmy5\nAC9xHn2VR+kfExPdTaeXTlUHYxDuGmTRq79uFS4CkcSgJv71T85aF2qe7fF+\nfviZ/YuSYU8ao1PB0Xlfqsg0kOdpmUqc0Ik39jAEFh9GLABuWAeqJODAMXdX\nEq06J3sshX5dt6EAew3tmqjxIzif+MtUOYK/zajHO6cUZ8ynT5HbAyhPKOIq\nx+qq\r\n=0bmC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAhy3MfJVTxxSHbVj9Q7y1gJVimOesO6CPxvWtFhzlRAiB3OR8LF6pNaLUtWN/vdDOQsW2y2b7lSaVrYtWUzP4F+Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.d4801c11.0_1625774550229_0.9958601310919388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/snackbar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jj3eRnS1g5dCvBmzZO6u0kz1rj7Fvdw1wEo2TFWfqH3x0YswroRSbYmcnTD7RRp6njOAxMxbRMXB5OnqQkg+mA==","shasum":"43fd535b64eef9eae3bdb28541a1469e570f2898","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HjuCRA9TVsSAnZWagAAOGMQAInv5YxGXVUE0kcumCPv\nyoIzkyTlzjBasyJiBUQgkkWe+H6ivfaK/AjRG2o/r4BceA8g+yhC2aVRMx5u\nVCcd2Trt/z0bYeKFO/ZziLEOtc6zBku+ai9V0eZfRk3ECFpEf8xUXGAE4LOE\ntrxmapGIokhDG8DJllNce+cCtoaS+oXwaHTNEhz/nisQKBqQo2bhrXjM+xGD\nfxTc1MxWnoqlJahfikxd85bERpceYlh+7VLBg7Oi6HIMFiEDpytuCZWqOiZg\nX+koTiFDVTD846nIlFTtPlBG75OJFkDX68s170gU51ir8y0/nH0j0H963B7P\nQnn0hWWO+R32+AGXq/rR33Tw01nBYN/M4LCo+cnJNaUj5e8EK4Fs6FuG8SHq\nNzmGSYnGidC2ItQsDHiMDiqSjX5u5rqPrVsOqNah8J83C78PgCYGAmdgOORs\nmKuxJga8EfhbFTtqj4yNGC1jH3AaqF1s8vdzUrwBBuewBE1TGpBvGgKNam5a\nK/oJNVWOYEz/g3CHMramwGGEVms6XrvD365pQyd33WQ4fjYuV7x7NC3lcLnW\nEdYncRau8/uOqTS982ksPs4/ZAR57jSW2UzoLWwX/Axjj+WcUPKuJ8Qj4WqS\nAtWkMfeJKGq3peoF7GLASzz1BJCtwZ+jM6jNrjzmbYzc4t97+dn8cviD1zDr\nI2Fw\r\n=QGYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlwWXJH9a9XESjYCKhBcGIiWfvI7lXofUD3cVnVNx98AiEA4kiVWTmY4b9BrQZ391jEQ4IL8DN12GMmIa1OCErLNt0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.7ec5f2d6.0_1626110190583_0.880806465418138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/snackbar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cGas0hYV5ULdIf6GeOjZionu9jYCHL6zBrGgDFZ7aOURhb8V/JgzXoO4e5Txk7qEmSquVHE0ZnO8qZUrxW/B3Q==","shasum":"ede79183f76973305adff0f5073acbfd9bc9ffbf","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.86cb4ca7.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9OCRA9TVsSAnZWagAAfk0P/j2epHrmbd6smgT6E0Ib\nRDSMPYexcjvDyhx2ohjkuMzLI92qLij2pmtBStix0qRoFv+nRgKpgDO+C0Dx\ndhOnnt8CoPED0GdbuAbe4/ZnG0OLO9t+ohnE9WrqpAMpfh+9EjnnIc12ImUe\n7G5yjYjxZOPL42/YCZ44pwALmXc0BdH2uRfbLZdVFmRy5NrScmQJbpOncVo8\nFq4FjoaG5o0MoH1jEpmNE8jB8PwQA3f0UC/cGmnFMFWOvwR6KBIOxpFI3LcS\nQToX6kR1IESzw7YnI22JXAs2mNAQF19p1rCHqQbBVgq5fULJ8Ry9fkmqifIJ\nVBoDuWLWuKoN0sfxkAn0oIveg0eWVbwzyJ7AxRYDjs8+dXyk9tMSELVMONog\nGWTWi0NDyKVcWPsvcYbPVAGAnPLGvHAYSGOv9yQpsxD5T2dv4yEyDpqFgRyc\nU7uRfRv2rLm1Bj/CerIzrQpiN1iQwwtJ6ua7efp5L7zhoy47CyYTq2FKtcq3\nooHWxbdWPUOHb2jc2UL6pSa3RG6aWAaGX+V5JvbU2EanCkvEZ+krJVHIG5NY\nElk8wm11cMVvA0uZQUiq+mp7TY3neEhdVc/tPNencptnMoaPnlgBRJKWWX7A\nPOS7HnbDXURrg2TZDho0kyGaCk9ad0hcTAUegLh829wU8e9wPWrKe7udSGH7\n1LYS\r\n=0bFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDY0g+JgRjK3yD4q8F7B/LVv8ItXZ7/QnM9NeIphSQMwIgXwxmUucoHClaSoJdVv+BaKT8AjHIi7s8iF2fqQ4z0Ks="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.86cb4ca7.0_1626197837842_0.3173284281896356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cb42f5bd.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.cb42f5bd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cb42f5bd.0","@material/snackbar":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ea77795b1.0","@material/rtl":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2a31bbf40274b11678aacc5de800344a83518f3c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2a31bbf40274b11678aacc5de800344a83518f3c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.cb42f5bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z8D0dhHFvfj5rPHDZGAMc2yZzcjdUm3PlghVHdrlpSApU1GCTVPI2KjT84TdoXpCKZZtkc2BkRQ8bHtjspHPkg==","shasum":"1a57455e7e1bb9a4aa65a1d8d448fe11896fc3dc","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.cb42f5bd.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dk9CRA9TVsSAnZWagAAqhMP/0P2kZymLc8WJP2lHqgS\nNvt4tv0wyIWQQTiIWZEvVOah01mj4//78a222EreM+wyKitJHNYlhfT0ES0L\nsB0VRRe05MCopILjE+tq977rwASCTD3wu+Y8W+9lUAIvszwzpdRf+HiPs1QU\nQFdOybI0Oy02gOn1cpAngUoJkrqOsRkTcHClZDPmChot0NLKoCxoapP2Ax+6\nTH2Cc7kMI09psqLSxdJxPHXFAPj/+YYqmGBheYKBqg0VXDWWZjxoNGDsYMcu\n0a8sx8t0TKwWB3lyYWCb3j4EYYPhle8Y1t16MHj3HkdcRbQzf5og24ga89MR\nLGAQwrVmRQDCOlrYpUljUJxANORz9f8ISDRuAxwp2ic0SyIHYZy4nQPfL8AH\nYeGUye1h3CrtVZYOe7XVq8Mi1sTVxSXK5bGQmiSQLdgQOJaDBJsumEoJFQkV\nJRoMOBGIv62fqMCO7I/an1JciXU1Wnh56Il830riSSp6slrpkTCVxWzL9fUr\nQJ+mouWNNcnUbkh6kZQzGTfh/QKW5FCgNb9a2BzvxrkvRQoqIOlui5KFVXeu\nhhCvf4VBmK2gzNkj+yy3lDScJG2xkWRfWDxiiQmvsVynoCHaxmKh+GTt9vCZ\nwzGPwzTRHUGi1dSEtOsYujlmMzjuod/w7SWDccwmJPO0lzazv54ZogkIfrsE\nHueT\r\n=jMZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvyva1t4yJ5fFD+Mqalbj/JVMQKrEXsk0eWdmZsNRdCgIgOw3nBlx1LolMCxZy4gxSEeRJaovF71y1pC/8VlZSpHQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.cb42f5bd.0_1626200381018_0.49544528707123336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.bc9a724e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/snackbar":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.ea77795b1.0","@material/rtl":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h7KLw9HUWKTcrtt8QKTPT4txUtoRI9bxDlKkzCIvDrscaYzMA/sRAq0gZAYJMPQlBqzmYoM07ze01AUF8iuQ1A==","shasum":"2f4190df94162615913f521ad3ef7780c7487b4b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.bc9a724e.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d5uCRA9TVsSAnZWagAAMOUP/1afqPwSnq71rL8MZd3G\nJ1lFSE34nOWVBL5V+Qp7DgmJLXYg+dImLPQrIkd1UNGvu/w5zHWmb1Dl5zyK\nI/Gao310My50N/BW5b17cMYFt6+dol9wKXjq4A1wsUyBuuKCP+7GP4oFZ5Ya\n2dCiomBTcVGra2MBHBCYj+juxx9zyjbvagmyRmM+Xa7ugIuakFnYncGfYJNI\nLo75+iJmDNOliq2GPwqcv0TbfeRLwtbHOObp3xDyMDSXjsRI3RKhjie647bz\nZZrlSzly2aCRKuektCpfdjY5XPAQ7y/nUEPfDB2ofj7U1aBPZxPJyGxcfgJU\nG5vnQWksi00Y8hC1J5EHAIEh8P+96gEauXaBfUu+ZOvpOiq0ZONYRMeexei5\nQVaEixCePZTKiOuqrYRkgVuF+u2LyHSgcCmlrwMsVasyOIE4/KLwGf92i6Dq\nfqetavJSv5/OT+vr817txPkHl5LvOoRRN9+yQrbCDlamU4Urz1lp19H1O1uN\nwak+V7K+HzgsK+OZ9FYjz77UIDJma++kIV++yv18tk1u2B8IQoy1a9WLhNVB\n9D7euxIYM7EahN7Qx16RBCqkZ5knhg4K7UU81YrZgU3V125CfT6HMdViVEEF\nnWT4phWaeOiPxBCr0qRBZDTetdDKUpv6W7eFz3lii9JNIF3Uiqi3Jjgq5kX0\nRbPz\r\n=DeT3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVC2LyCsAQ/EVXnVjn6p1QmDp6Dr1x37WpLryX12Ij/gIgTH8HicTEKqPyYt110s9a2PMocJ4yNs2B6OHcUe+EeZU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.bc9a724e.0_1626201709901_0.702461334581983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.7847b83a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xw7xCTpPb5ZZ12MDvTZ6FJ8W/u9hY4QSzpIHuExGuZPOlSSdD8IA6qHJCoGSFIIEGkcjrB4FIHZMkcvnbfnMqA==","shasum":"4187a4b51439d4ffcd2d879c692b7aa2338b6636","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.7847b83a.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxiCRA9TVsSAnZWagAA8qAP/2sDaN7C2moXAln6o6WZ\n9yRANcL4/0EJ+kaRmw0yN0HQgz+obJnnLK2jOHcKl9I8lwnajD0T8aEBOQTk\nXHofW6/G+voHVYhBOgRfCxYn0JBWdf/AZAycoDk5f/Q3d7qXBbseYQunQM0N\ngEj2C1PWM1K/iM2adzuRdpSWWxLWCkZupJc67DLWvutGvgZ63pMc1H6O2Z9O\nN8fiBJQCRsm4SiY3Qs1HkOmcq8qJosWzdFdyx52ynBvEbdsWlbslcWKThNZb\nZl/aGB5NUtulMjVmrsKlGCAieCHXh4K2mQRQjIEnXmi02KKEX9wsMdoAZ9Cd\n+ZP30/Arb+jrEePC/rx5ZsciCYZlt9cQelHDWhWedDtEq/FWwTwEOnl2uJI+\nrYyM5ID/NSeM8puhz5xergRUf3vK0S/540DhJOJDWOvRWJpNupj3uhlU9TZZ\n7duCHMKPVCivUz3Ef+Gh0RPsZpIDRvs7NT546xQPOUJ/ppHd+0e4m7jIde4O\nUf+3S1YVK++8frEBURjTrOE1ti3SP0H6Gesk1HMmFS8+DQvPLXgV9bHPw8Lr\ng7QdtRq8kB9IoT7mZXrGhEmcUI/v9/LeOfjYO8URFnL6vu1Ll2J6y3AJVTH9\n9EnzlJb2ubSyPDa+77ZXy+V+nxz6Qnp4+Vmt0dDeha/SZSNQLLU61FDTCbOg\ndAtl\r\n=2Nxh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm7vx/cLowZfuqXUr2G0KAkENLaRjOmj/h6wtkBVGE7wIhALlzANBf3HSC/VNgX0d3Yzk6S+Z9NTvS+dY/ndYa9Mak"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.7847b83a.0_1626283105576_0.1736563768927577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-snackbar","version":"0.22.0-canary.8cba18fa.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zcZtyOaXSGDrCwV+l8k5X4IkhVS1egemHhOO1LSh4nxcHZzF+Lh86XSzUwBjl1DYIjT0JlO6KDN8FZyNvKUMRw==","shasum":"4e7b2d22cc4aa056b322aaa56cb4c315922c10ba","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0-canary.8cba18fa.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70htCRA9TVsSAnZWagAAef4P/iJrTw8pPakFaHZqXdf+\noYlOJDnAR1L1FAuh80Br3xDAY3HLCgHS1z7rCJTSXnwH1uAmxYFNxeNtqjhj\nz0YcqwanDgj1FbB/zmn4j0ONKhUks5x3KAgZrXvLdGeOqEu9INsxmrUgWa8i\nUIMGmHuyHrx8AfUeldyD5SlSqfgOGjghyNa5kMwfx+38WmeTRZADIXhZCJxr\nEsdJjHEOV7soNi6fo0r7RLvmCVStCIQ7CysxNWemqbp4ODoqVx3jtz28lFIN\nmyt0EYWQP/MfruU0m4H8HVBKSsYC+ZAVDghcp1IR16dCjuy55BETRowMqK9/\nRc/kRAgQ2139a+p7M8s2VlL8i7QlWiTbMgjkSJcfmswqI2fIj2TTigWcfDaJ\nZynoUDVr1nAWXCnGNWVJCyMBcBgrnsft+/upD4MBfVDicekCVA+f9W1nfa4N\n6B+T92uQc+iF+4l7xdz/vzYE4TFQuGIxvxQukt25FI7cYGpfuuBpDUdarRFV\nVdlZCvupsqcHPWGXzLoOq9z7z9MW1IQTV4P1eNNQeQYojISntzqfk8iu/e2e\nTHAgFfT3X4MbMXOPinjoKa8SjG01b7eO6rziViVZiZ1FUbirr5nYoTHBXORT\nUW4ZHnWzsh6q4aIVO+EoxPiVbOPK4og/O02bWZBMWRYmzbaziIZDwTaJ/zp5\nceXu\r\n=DrmK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9IfMTweTI+lm1TTx3KJlu5dVvckiwQnrAV2Q0Uk+2WAiAW3u8/xTNKWEK8MTkXiFUHNsR3qY45iAOjSfq9XEiXcQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.22.0-canary.8cba18fa.0_1626294380621_0.5932014348439398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-snackbar","version":"0.22.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-clx3d5SAaU80mgLrxKp9s47HXMCM/rd9fpCNK0NcmdB1UZe+/K12LcIDQ0Us+JZJ+LYfEBn5kBLJaFQpb7sDTQ==","shasum":"886e24ad38b9b935f3431c92231e6e094a131c77","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.0.tgz","fileCount":16,"unpackedSize":63081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72XaCRA9TVsSAnZWagAAM8EP+wVqqO/plopQpB32lQ1g\nxF2xEXFaTygxFt/u/9mbfQ7TnXcGeh7CtZOZ0bUhn5oYLvYDMfK6SQ/FFRqR\nMHrXQHRIA+8u2QrubjWhW27A4m6XBroldjt2NFLDJPcbFZVRvQPU9u+Ys39j\nWIsjx9YKjclInp26p1SR2oe0+EPsX4QN2G3KgJwjlKEARDSgKKAFwCXrBEf3\n7fNwsH0OCXaQxuOfGddriLYFENiXBNC1f2OAsIkym+JXoVNP75B2YTX0wHMq\nM2Zh4cdcLFJPxeu295Q0uy+qwaa/JChFU02cZh2T16x/gdcpO1wV9NL8YSBH\n3F2pFLR+FN0/uYuiN7F/ZrKoO0tWhp8lKw+Rg43EAzCeRcXJFTXCApw1I7HU\nSCPP57zEbHFH7xq1ron+2hgL+rWG3A5XpsNucZPCD0n47MPZeTABqJNwsOeT\nCk03AvEhBWAJW6IwrY4+YyXOpzkyGdCDCrB4YBTH1Va/VAPFPNRFbz+/iu7D\npusYnHYQ01dAqq2xbCGtL6L9IP7lpDAQ9Sh19PFc+efklymvMhmoujFMNAso\n51jlxKMLQdaIfDLfPRjAEwxXO/aacHhJtlnJa6frUn4ab7my9Ue1wC7jtkg0\n8iLaXTVc2fSPjuQSnei84lrMquqtjQu+oB90J7Gdl3zjgXubObrflza5G7AF\nMu7n\r\n=XVE5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAb7Mkkp+66/ooY/pvzznJTvbDk5r/D/RbosvHxKp7dAiEArr54bcWmo1BVnlgP693x0sOx7KH9EXvFZ4ozLgjQhYQ="}]},"_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-snackbar_0.22.0_1626301913785_0.6851329553363785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-snackbar","version":"0.22.1","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-4ZTb4Gk/zKJWvvqqKuOFo1NO68DnCgyQlktPdNNTGhCERdxkEQnZz+mkAw+Mfr5tCBizomgaFzd6tuAZCUutyQ==","shasum":"720bab865b0448f98ac42124044a4f5dbfa25d89","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.22.1.tgz","fileCount":16,"unpackedSize":63081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72q9CRA9TVsSAnZWagAAFm8P/0wbROre96gxxx1FtIsu\n861uYeM7rZW4ehY+4IRj2EEVH6ZIwt14Ay9RIvTw1Ol2KxkZzUkzeaHb3/t9\ns+T7ZGBxVFiRNBF4TcfR0BwtoXrxQCTTwUG2sWvzk3B9NOS3YoWPWJxD50rt\nK21j8M4yZKBpJJPkUGHlO/3UpR7CDSHBW3K3dh7B4ReKkwRsfFTjkMRrN4rQ\nT2rkNs2ololiZldz7GCkJqUBoZphtTmjdN1Y2wWCNSvUL//qmDHoW/4upYhL\nnnNMpLeiKN6jY018IAvplo1QnISsy897gxEuvuvRQEbR+B/dxxbiZ+FWvq9F\nVPiSwPwTyngB97mpRRmR2YlWSOt2USkkciM6/mNLS1qsHVF9wTwNiR0VgeFp\nplheLAopH9a5VBcaNW55XKCeQQjnMIUel6H64hle2LeS4BaTsbZOHrANr0br\nV9sGkcSSRsdS+olBLcyy0LKnT3crpOL8Ni+8VgH/J9WRN1UrR48zhFna0bbT\nnyR04NiIUu9gF4nBx5wYtHVxtMPLisuSUi56FmaQo5fGvRWKAuy09KKSaFdt\nSr22KHOVkbweZy6vFWrrUcGOOJDhZ7DKOnp8ktMst/mGCDZulceGQm9DlJ7j\nAdrGbZdPn82EvYU9fBU+7t9ooojAge6MsP9oqYi+NDK13z+xHVQR0Urvv5ZM\nbMUa\r\n=354g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvWNWCUEmV0OnNKB0gHhfzF6pT4aqMrj8ASgE3S2CWNgIhAMEtpZyDpxTekPzcJ9DC5tq0lgUkzVaAenCnUubb/Vhy"}]},"_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-snackbar_0.22.1_1626303165194_0.4548946546940953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DVHiPsWotdMfabtp1BAPpu8Y7eaiT5kCxzs2M2Npsc/oBoEW/5NQRDM87VDUo/WglA08HzgZpTpsnDOmGbg/tQ==","shasum":"57570fe785e27ad2988776f67ed8f42c7d4a89b4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.fbc09b4e.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72r9CRA9TVsSAnZWagAAz+cQAJF+foF3XyxjD+pmPQFA\nVnskN0OoOvtQn00vY+BpC9IjwM2Ppj/iTYVtYdM+JecvcZII4gs2YK41tGTN\nlLkNVYdB4tjGxsAxOunm1f1Og8TzqVuKkUaZNBO+n5vHbeEVv4vp94ArR5hK\nakQ9amytNYfyp2SDJWV/+Kgqk10NvZAAM+9UL3vb0snZTRz5lT9vI0INS4mF\njjxTv/MMzHmoYhKjhRKgQnq0HDs8Q80OBeeyrOm3bMbLdFyhGM1UnlJIec4+\nCrvV9LyJpa4ILTEXe/mqLISeekqP/UEXMxzjGwFe08sdvdY1CBZqlwekLL4L\n4t7kHKFxUJ5Q6cptJSvM3d8T24e06kOKMsZClWsMqpwlOrn2CAeq0kp1+02R\naLbk0yi9z4oquIX7XsZQ6BCaLfUiD89wgdiIlTA/HKJmmRI+tVcfj6+TjETt\nv6XNQQSv9R6mN5vKBUURy0BxKmgA9FKlIgTSde7BJLH94X3b/B2b2sNLyF2h\nGctnkUX0doERax76fj+D1fLBuviLsWgXJvDZSdhIdVTK5D6pARCT+LXkdi2h\n2IwsjFVBt1JQ3RYIYJx8LLexzxrc12acPOziN5dHLHRWwdqMfr/QrpjlFFSn\nYy7rIRu7PaWgWiVZRbvEdqPb5XShNd6TT8NckVXw9r+PfjZHb/5ZTjgOKBJP\nrWrL\r\n=rr54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMWRdOGO2idn8RLsedaOE0NLA+otqLHW5Vsvi3iSBJkwIgH5coeA9uHH4N+WjY4+8F7RQTH8LN9cwp7sdpVsvsQes="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.fbc09b4e.0_1626303228611_0.9110895284592124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.73e9f83c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mxj0wObiEf6PUqCudUYUJVSwXhxLQrmWpU76S5QqMiv7gosl/pJU3iyhD8qIlwza8tU2eX3Me5Yr9/FGCU3hLQ==","shasum":"02cb6456110dd0217d252b3e83f74f25523056e0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.73e9f83c.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Jz3CRA9TVsSAnZWagAA7I8P/A3BsMcAy1sFeEDh2B4d\nPzN+6Dnf4Six4IY4pgFneZwxS0JUEN87RKV8x57aS+OsN0Nr0u/3F73vhmPV\nzimbAYLkDDitYO7yW4PMA4ab6xMW7KOmms4RA0xY9T7tcjjne+vbMJGHkD78\nZNPjzazsj5qPOGycqIuabdw+XSmyuFrmuAtMj2LTcpMGfbweXAIQHtg171ly\nh4xyPLZf0TqO0GaoCdg/niPmwt+bVMoMACPkXCEV4w7str+WeC2j0+jydPBs\n2NvR/aJk9qaErPT6v0JmXLlh4Ltrp5NY8BX4yAOyHRiVUu8NrTalayB6X6+e\nnhMXLXxJSWCqgoxPSXRcemOA5FTY68u9hBS4Bq1iGCk61AYIs2HtY68SkN59\nedncMi+e8cLOybEIM5C+nNReN9ATTZwR9j2PXG4uPQ6fSxKwGSlHbmmb2xRf\ns5vCKl/bLWb7KZUQNUmphwP/CqwxeWomZtU3+rbYt/qd8i01B0bLdyEbTjq9\nsoZYM1FiOlGMD9aHTqx2qB6uTgos/LIlYVJe2D03knzwjzUDbnkIIU53k6EK\ni5gZyZFyqlF+nQPmcCykjiLswbguXOHpJ/FwIN5VWicSB3RWqLU/emrxQRJe\n/rzbuBD9IDr/IxokbXdfN3JBoKwWs0xwmMHCmWAI29fPp++eGvvll2uyCs7J\nA9zL\r\n=R1Qt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZXN7WAkR1ygNbKrz8OFH2k9k1Ns3Stoyk5ohw0zd07AiEAsihROiv+S1u9wk8gkiQRi5vvBIT3ugHOFgZJNx652Q0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.73e9f83c.0_1626381559451_0.10487599154658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uurY4EuwjUFcVZsrq3uR1Lo4uK3s7gI8ZueqcEfxKEwMH5XTFnllIXvyvW7JHiXJMgQaPVUZZqOVViUZmMnkpQ==","shasum":"642b2384c856cab85fe5dbec694a1ff10da2cecd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKfCRA9TVsSAnZWagAAj6sP/1DHMRB7CKGD+c7wuxdB\nCDeO/YGdqWycy4e71jkNhiw9SCYBUlb5fLxig948jX7b+5kQjPPW6VTjVxm+\nRlqs1HJ1KXJxFwYZsifSSdCTGIlg3Cm0c4qNTT3cGwz0CHCMvS4X85Bvh5VJ\nTg7uFTPJ/4KtlfmeCKuyP+sCuvNCyIwnB3D5qyuhphvkyHP+FS/mBtK2uOgd\nHRhSx7Md9qMf1DRti5K/XU7CzDZapSFa7lWIpMEJm6poY7X58Y9N2BERGHeR\nFvHNjSJtm2y40m9TvwY09kEhvcAHGZCic4Zi91Mep0p/GPb6ofpGDOV2+mYP\nXl5CDesCdllB3z3OKMAh7+5U03Ph0Eqf53AqyktUetvuf702L7LNLfTKSaRr\nBR7DC2sIWCMCgOuNrIWGlf7CCm6XtBu07eFsCTp89C5ocH+ExUdSC2EUQ3bT\nh6pS6fTUoXhNwoMBtPNshkotdt9jopazsBH2xsc+tACjgNEykBFRhgnlsvTv\nG29v6iT5paI81/StQi9asXCsElhxHaJoJccsgpUmH8UJ52IpVgbY2fU/3B11\nOP+GgaC3e993PyU04/MMgGAFnHMToI4FpJZPSvW/1D9W8WjVFpP4AWOslQVL\nV6UdNehTUkImUunoaMnzVuVvJ0GKHI8fcitQ3Rm+Wjn1GaIlzePp2ghVTiTF\nBpRA\r\n=mPwu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWAjTEVcZAPNjNUHAo36+2Mio59kC21s0C4LttMWmIRgIhAKIlVmo4+GbYAylR/+xRQGqRd4YBdfqKW4j76uIJdZN1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.cc0aa7a9.0_1626383007405_0.7640769372943237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.a8fcac45.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G5dWa7b0q918QYYtj+xZekvB9f0Vw9IN1GxTikhZSuwbzpVw8zsqzDrICWtiFLAt5QukPbsdraxmC9zYYINHcQ==","shasum":"37c68092658c140a5f19297c72e6610fc9e38cd9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.a8fcac45.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcRCRA9TVsSAnZWagAAOlYP/1OQcmKkflS9qN4kld8Z\ngPZxeri8chtZssxhlukbG4L18EvfOp+QB+gMafMqvqvIbUhRtzJ4nmJo8/9B\n4AzUwSzpfJGpI3N/w8n1V2NUNo53R0gQHnf9YAncoO5aN6VjhQLIVGRYF8uK\n3x7IAb0EZWZC2fHugQk59tJR0OhB8X3JyHqXoaOYstKZiJ6ULYuuIU/Wc7aj\nnuc6x6iIGPRaoMa7ksSakKdxjI6ZBxJmjl/hgXUCAafg08fZWdbW4RB3S02o\nXW2V9ENooQ/GQByapTV/Mb5R0XMtA0U8Vm/1c7Dk0lKaBVPjJLpQg2kzVTze\n8oVHgmAI4AMkFbuSN1lAYSfDs9E1Uf6t4gbMOM24uqeEU6AA0QvmKU0J22J0\ns56kPx/RCIMEfijceDObN7lEN7yMxJxlUTGcCxAaznxkL0BEZNFa70ZaG3QA\nId4VQUuBkj5S+7br6dizwUIuqklHS8VzlyENuexDgR6YGP7DFlyVB8BY7QrC\n8VTRWHy5V72HsVLRsLBb72tqAupI62z1xq6165xU2ElTrMGLFkemejQ0KBgU\nsUKTal4Rxooziml0sWZDLL8XLwcl7OkcuBT3lWOuAhtj0Zk62Y9hZIWxhs1i\ntOg1mgWfNTK6DpfwbFDT9gQW5SYkdW8RWZW9HInm4MypEh2/cEJfobPnYFnB\ntTAf\r\n=CRdp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuCJPYgN/9HHry9+waaToXuLiR4NAntd6jvbufMUyVQAiBmB0ny9KQKNLN6jbxauZmIk2kigM7ZSgrmh4doxjxwHw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.a8fcac45.0_1626384144992_0.8337556834325164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.3ca580d1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vg0nts4Mq/evscgxo3QrGPqjXDJXVckyBaMjHMlrUoNIFXj8JFnvjvnTZKfsbvMeVCY87SKctoiyEXIk/kM8jw==","shasum":"bfc67a8873aa857c0a811451474cf480d4e3262f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.3ca580d1.0.tgz","fileCount":16,"unpackedSize":63116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDECRA9TVsSAnZWagAAOXoP/07bK2yQKb+BJ2pbssMY\nsmFPKHKX/rxY1BqLcpmRbXf7rbz8IJ8MgJ5wycymOeZgnD7zuc4/L+IuxN1Y\nZwmj9LPy5Dt5OhNXHU5U56gOxc8s5THHQKun3cXDhH9mUdHtorp/skh5tnPC\nHYyTEC8nzmY4Ds03TcQhte8yAS7mna6zn48rp6nuv/XHjNyxBkrRIANUMJU0\nEmm2wzUfYQg4r6E/tHYQg3L7l0aQ1HYxuVmD0esFVoB2iNUKZdNYSNk1WxqA\n0mDxJ1qOTxxKdFWRyX3E1eVVFMVco0Y5AgG8q1jh+zkGlAzK5B3GgJ1dhGVj\nlDordaUJrN/oGJi9fYQh8kNZ0oEXIuGCJNYElHapwqq6/iy63ztdDzJiuPIw\nDv01Ubkzpu2kKSfTLF0ngCpFFV2XYd+wBL25vp4c5/8Mrlgy2f30RoErAtak\nKtNjBCUOC3QBgBQRFM4xdMIzXMgmivjBLTNuPQS7KWLm2fTw9amPr1M9GMUR\noliKYxPTjuqXX0wjZSzrrD/TJ3s1vFFlviUW04YLBZ1Vb419XA7mDxcbbNZF\nULlSz1IYyzy8zqwehmteP8xEo5bOWX/3GTKVOGLZRUUNZE8EEHSFKS+M8XsB\nONFnnCckXbejssKHR47MR13726YeL+SyZ+GpM8qcme5JjUoDK9X/87Ua4pUl\nKHbe\r\n=8ynh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3oLWdE+Dbdnf7+b0k6Om+W+Gdk1vEKeMuZqXYbZwg8AIgHB4Y7ggqOVn9qGgrkI/dRIkZmuIBWAXcSqDjcf6jFFU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.3ca580d1.0_1626386628375_0.5560646122479396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/snackbar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J2nv361F0yeo+qfOshGmlLy8sOSTLmbWgEfGiunU+msxWd/yW/+Nt0Jv13b40x99swZOyPRL8T4SKD5KdEFEvw==","shasum":"575aac8429f42ca9fb85e76a4a16541b60c3bae8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.9e41cb2e.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8L/uCRA9TVsSAnZWagAAwbgP/jWJi9FJ/KAsbqEfFM5y\nLj1r2jCFHqlKNUPiFFOm4t/wIKuzSA6jDCtgSEUDI3EtDorpFwdjx4sY37WV\nAY6wNHz4c2sTlWjp4wztiFnxmNtZ+sdIyF7nfyuFmBFncq8hpRaUU59596Qj\nRE9YZuInspPPkrBRksR7lCfz+jptKZJiLaX22crLMsgXIq3qmJakG/hf335W\nfwvm772GSSJkGCYFpvTp4Oxnz16yr2Wa+eMZ32fdH1yqQelnArxbIktHAJov\nXAQw0ZABv2Hye1jmD7aFsazXq9t0OQa3uAeaRjTq+hbVM3rnYow4BQnHVOEs\noXAE9MoINaRIjgW8RtjjwKZBEUj9OkemK8gzrNeZSXVHknpUB8cxWnVT4fFO\nIllcBa9KxKwgEK4ArgZqbo5Z+A9yfE2n8l7wM9mS/zoLWbfg3cOzSguwyMZh\n8QSxocl2wxaA/Jh9yQ8+eSCM3xe+V0ybtZeKMYxs74yVXIyO00/JlqGWHryW\ncQMIveUoyW9cvBSOavEe7q5ljbPiVgUub+eLRM8lxEN7eokYxkM4lZCtgJ3R\nbSiP/OVvqUjetXXaMfrvonV721wamMBNRgY+XYrd0CXn53sUKulxSb1ONBKh\nOS2gbfC7m9Fq90t+O2e9n6CD8/jiHwcciSLOngk7KoCXlEMAbd3XP2rpy3uj\nTtDQ\r\n=ESpk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHRTNg0yivBCtchOc0EeMpHNns3R1329F0sGaKaJ5sAIAiEA+12Dv5X8PshPEKyreZ9kaQS4G5pGtSfOUXI9DS2PTr8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.9e41cb2e.0_1626390510698_0.24722420419788715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.c180db74.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/snackbar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O10paOwSPmQ4K8tqM75/ao0lvJvdJwVUzIhtyELppUaB9qDvNadZy/4YlXhFALoNQ59GXKKpY1MtIIALZxcolw==","shasum":"d6c3eab4af8e5be111b9d9a0d416105b939ff0f4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.c180db74.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDeCRA9TVsSAnZWagAAvVkP/387X4CUhv/GwVS/49WT\nzX7u8qLzl8WS4Kh3wroUCE3XobVz365iWBZ5jO2pllBVHkcCr8ZmpSYp2e1n\nyLjoOiYwZe1R7eHHMdf2mTtOHQytmG9oKsILq4nzRauHqeVn277Deg+DUqaV\ncCvCRUAwsfLl0TGYc6Tth3ixS9KtlyyLXy19r78+32AyGWJgPgNSySgMOUNr\nGUIIJTFPeQb8gz20XfzERHrqo6FzSj0jrnupkH+K/+k4yTGmPE0lBKJpYcZ9\neydM4tM48TFQf3m8LzLAw/6kwsy7u3RHWE5sibBE6Z4qBOfQHJSRt03imvjn\n7TH4i299h/wCz1mu0Ak1hPecEwQJaFYHCI5/YcZQlcJH4zhVyEONV+Q8JWb3\nE3jenX7FMMCUaQfEVSd+/uVogQZWxUfbti9zTIPoIdt+6452olairO1VN8Ns\nvn0GeP6kqGafErzbAb5ROxq/+l+tnc0zO4eyOvf0W6047wKhaXNeaEUlmm+0\nh9JuUfl/jgye3oA61cN1oJ2ZO8FZlCUdvLtuBFAiei/igGhk6pqbWcywsKDV\nWxezwJSLnDujwBL3n9IFnGwj9y//g2sloCUfv9BHN2rvSOprv3T5qnrRs3mt\nSeJ/BiW540nO9zvh7uYzXifIIUORIPdUsyG0XexW+Ttmn+zIXnJQ4W8zwaJr\n7W8W\r\n=unF/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQzSWc/lbhjR6h+yHShvbxiwtCAYCvcAnRYyWVzDcffwIhAIAE/mSc9vQlEv63zN/+DEXuNm6LqU2RcYmsRPLDA/6w"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.c180db74.0_1626456286807_0.48761243497399653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.0d0a9267.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/snackbar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UxLkocz/+Aw1Fh2lUTvSBOLTSZb6NCU0ipGw+VQsfBZ8VBhPbCLbyOtPikj9OT2/ayjOIQow+KbUDMraT+Xmmw==","shasum":"b2b89ec89be356f7d9d4d3548eb9101841afafa3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.0d0a9267.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8chsCRA9TVsSAnZWagAA5YEP/RjebfcKj2l4ZFw3o4/w\nrG+gtci7VEqDNiETUBYiGxo6Cm7uSwGEjl2rapNfLGZHAD7vL4oGMgkOVoKd\nCJHrEm77LuIjVkmMVfgMXj7AafE2LuynVUZPbR3Da3jQa4lf6ahxJUlji2QC\nEYUK7uZGFdYaFn2/CXA8h9oWNoNOBjL0/oTdyzn9nZTfZeZf86Xzflk+U2kS\ncklGPZtS4F387Fq5X2ttM3KA8/DT/t6GJlP+ABX6tfqOT77z3flcNXFBkBT+\ndvzH+Rrh640NVr48YBVfIJBX8AXvCpHmi/GjKSLaqDsZMnRlkOB9HVN8JQBs\nm6T1NbfpMitm1Hp6UwF05Am7a8qNTQePIFVpLSSU/fup3w0MUveM28cnwR1W\nf6NyXm0fsEthW7qIGq/OfbBeMfFPpmjYoPty21aET610caUlVG2vT9PgKrW0\ne2HUyPHNrgqcP9szRm1YbLVuLP+i4HcFo8bKaQf3ChP7Qz+YQwSJa7dV3nLn\nPYbJQHioh4TuSZXy7MWfwQwoM8oLYBaTxzsJrj0xkynBuLLoyeJMhGfAwVH3\n6mbJuyso79qABQ97NGZFcsOdU+BqLvySJe7AxMuhPd5Y1O69Lwn2UBRAQWK2\nsHTNi1QlNH6OgKeFRXmvI4hRRn+bJcqrECFesbpkaCSIS7xJXM7cTNICAVH5\nSkvR\r\n=0jM+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3jw+tfgYhCsdpt7FxEM35D8e8Mbd2xFRuUob8WqQSYgIgQux7iiXWw3HuHjOjrdZSPDknc754FqsrTSPDFvOvdjk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.0d0a9267.0_1626458220434_0.6549843195236658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.d234ec3f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/snackbar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fOcZ05ajrpzFJwPVaUszC7O1RM/Jo8V5kUVjwifXdv/O3ViriIhK6oE93cG7Zf+RDLYD38XbEfBEhvhs49gXmg==","shasum":"b97d2b9daae7ffe5303b34f2ab45a200a7316689","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.d234ec3f.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8crnCRA9TVsSAnZWagAAsSIP/2QNgfUMPes84UURnXay\nUHo6F8g68SfqYsCZ1gdnOhoyQPpSRNnshb0rg+D1YtTUKi+WxQjCVaObv3WU\ns2mlOP5Iif8IeSV1I2/SdmRnF5hyol9ulcHQdUyIynthBJm5qDSVRV/M6Ed7\na0g5xxjNaql4Q4joLdWvNOkuA6yfQSCYg6mXKsfjLzH/3rfLaU33gxZrsB4X\nLffGKTGVBJSsllzWJgGkcf/aGvj7U+lRWFDj2i50e6QKGZ/To+9RQ++MDDQ/\nnSxgh0VD+n2RT243vC3P7qRqWgu4oGmTHnRVIeG2sqV3Mv26OxOazYmHyGXY\nW/32KmxuhDXHHUIheIHWJ5UcnJk0oW5a1RXGjxVyLlp0917Dxq7peyv9XgBp\nWfh3eC0q7wR06BCfpJQj9X142uziR5LNX+5jVE6MJ4U1wmp28QhqY24gDH3T\nZ5OcAwK/BfTkijuoLFzFmrR/cTCgsTS6I0yxV1zeLkIRU2gJoY5t2+xO50BJ\nNS0VOqG8p7Kjs1+0sodU5dgIWeoD6XVXpMuKr1zErJjh172Rh97cca+2fFjw\noCe3PURFzbw8v/lxtNvvaf5XgA1R6QUXP4WiSMTOOvAiHllY0jicWEV5F30X\n+r1aetkDN763XytDbUSxTYqZt4hehZq1M/Uxr3zf9MbUx91rMiTkNwqvxC3u\nPZ/9\r\n=p+83\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHxIU3o3pbNw5PvxLAQJ0+oLuR/SrOf5qBr1DizHicLAiEAjcQ1MgwqbSTdpbdZhunrEynbkmaM4SF09zGRopSYpYc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.d234ec3f.0_1626458855485_0.5939922361083521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/snackbar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zV4rVvPzr3SX/68pzg8DfzgMf5uF2zXy9/2XJdBijVHhQU94nBDFzKR0DpsipQVdUHkrBZZHJFce6M/0AbJ8iw==","shasum":"a14627c4d96aa41653f5fa88d4a0ab469b1c26ca","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYZCRA9TVsSAnZWagAAviEP/jSKohut4GT5FgOMvTh5\nMMukcimwpiSMO8trnSB5MZXA1G2J88K4hDtkh/S4/3WWG4pSfCdOPNgWq+ML\niAJ6AJjq59W5Y5Hy0qp78epWWGF0S0GKnsmaal0iWJXYp/DEKFVz5zaSBktC\ngkZgvMx8RPwj4cFEIJ0qbqtAk21zuRn/6Vf3ifLoPcM/BPEfuV6a4/ZtSkqr\nPYjmcmc1i40DIjrTPurRGK5Dq0/1qrdw6VdeJyuW6tWBPIa+CgJbbwJ5HRLs\nZD+pdJvp9LhSLYP+vKYgqCyqai2hKihj3l16le773FkK+YLmF7Rmgu0fY6e/\nBvR48pHC9Z7sHKKYSbSIgmOPrdrnkcbnDL03rVEFn6ysccrpW9AfZrOZOzbD\n8zhz30oO5OhrdAEiaVls9Jm9FB1DT9yw9KxadbhfEPJy0fqI1sAZTtxeIMXd\n8NMsEPBkUDEcLepcC3quQAYDNZcQ66JE3h4hozt/aQC7X7joLI46sG+wvVxd\nuWtkRGbxRIw86H0eKf6nK6wjWBW4rAnSvrowf1eOJnm9/H81LbL07BHFS4M7\nV0Af4aV0O1AfSi+KF+XfUiOKbKyU8XdTGxhBXI/5M7ctdrfqNis0O8ux9T66\nMlew0r8v/NC4C58hqnvHUYhjGbecgAeTwQYmg1JKl8aqp7GIoPH+zGWHavx2\nFgaL\r\n=vDe2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRteReVnwsL1LUQIZq07hMzeP0MmxxfBunBHQqfvCXoAIge3Gv6OwYcbIR+wbx3Wv8UqDm51kEIHZ35RpaKTyb3p8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.5cd4bcdb.0_1626469913364_0.23284045905570472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.2b133cb2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/snackbar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0G5qLyrIhpiPwp2rK+DT8cMUTJbgskyC1BZK7nVITLHFTQOm85JXwaeeNYD9uiDosHz8Csh8+Y5Rjkluetc4kQ==","shasum":"2ac7148bfc1300b400bfd2f617610299085543b0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.2b133cb2.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLeCRA9TVsSAnZWagAAVsEP/iUJljEe9euMxRfCDeHV\nPIh3PHYM1Ds7KZiSes8qDD4fgCMLa7VRgAF85+GMutLQBrGaqsZAv710W0rU\nUpi5iwTntGFgWjhem6PbCtcw4iO7F+A76DjkDmpH6Dsj8QuyNNGn/Pn5P9Vk\nFTDX+FA+MHbBmHmrmObhUVJ182T6I6B7skL5UZ903PgZt/nmZCSHJeZ72fPn\nEQ9LFXQK0zbx0hPNEfjEl3TpNEh0TbplYoyJqT6lhXEuyGp4IkagjzDsDaUv\nmnXK2JlbGXQIzLPagm3Gt48bCFQjaIzbO2M4MiMoBVrglD74IF02SqiMUSP6\ntTbdFBl8I24WKAWjBevYTE9F3BH/frMnVo2nAbElG1Pl0BUw8CfCIV0WQgSW\nEdrpoEHeHk+NOPWrpJZz868zgt4hEgxaccb+PaaKP6E+W6lDGIUviNxMT90o\n2QgQ+uZ1EyDDlGsZsOKVFF+Cgk4e0/Uy/qWGbu2BEE8xHjk9oVGqv3LFpfoD\nB/kjc1jTWUKhG+73rEX1hGqprbmS+AGiWXG6bA7mkGuf/oMJBe8SB0tloX6p\nusnI5SzrojSw8R3UkH1BwRotxNII/DQJxeiDdGfYWdDserslJOAhVSDgfNqS\nE3aykZ7Y92nNnzHg9Lcmv6qvp01vB6N1HKpC040Az427Scf4zWyLWZ1JsaEG\ngAbl\r\n=Qu71\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4327hW2CuXaeDoohKntPnG7jux9eV7dQb72j7Es3zOAiA7IiEouXiFQrBBcj6BWxIGPjzAyDQlo7CDg5Pxr9VIJw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.2b133cb2.0_1626473182769_0.463721969683099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.ae4f422b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/snackbar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FDRz1JI8wRTaaut5krfsihRUf31W13tWq+W1aFnb4cLYmdW61EnyXsiIefssW2wtkZdbz8IzdieSO4EqD+aPoA==","shasum":"fc5bf812c947fe06977e9aebe1be6bad42c23ef0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.ae4f422b.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwPCRA9TVsSAnZWagAAmHsQAIJldtQrwjYsz8sTSDcg\nnPYwOiafq5p12PtkvzTkqi8zkwW3rHP60eC5sa0eZAns1udEUueyKPdAoEwo\n9FxyJPIbH+blBhFCp3g4Xe6GvQssKCHUii0yMfadRtMRgGy9cEqYZ/QmkQvh\nxjeafJ0iQMGc0ECRoMxWgHozDxafUUGAEjUwn8WD+TDtQCPiZG5e6GPo8RhZ\n2QjBwmnYOG3GS7nvkXDissORvWk8aIR0BMadsZeMMY5voRsVWe43pSRLXXfX\nwhHaKVnl1q9erugZMMzlJWvGjdUxPFoEqNMOV7nAUR4EdGlSZgv0E0akpD3Q\nA/tSH9LjR2gio4P/odxLB31KyL2//5q2kZmNHIRVtXe1c2D97ElF5HgNoOBA\n+3BpgC/5p1VuGinXaRnefdNqaQ+8+9d8MpUR9iBgoQyxNoaP1LAiI9sw9I1N\n7iBiHSxJ9i96wBWlM0Yh1jMFfTC5xutYKYSZnYFFcH8cdG0KPYkFLUomh5nc\nvgzgdz6EyifkDRHkokmvRGvLVuFzSdho87Cn4oysIwgKInNvOM8MjiB5xO75\noTRoawp8NejNe8NUnGqB0yCptMM0lp86us4DBhIiFx0zQ8cdHOE+UN81vidD\nCO8fy/1Ei+M7zUkoLETqQLwCT4tU+pc7YYb4qN0ffyLzA1hL1FoUtIQUjKDQ\nRDmN\r\n=6FkU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu7eFPeFVfBCPzMNdxeFCvkwxMht3M9T+dcz3yKTggIQIgH4Tq9A7lVZ2tbT2uJ+clINBLmvbXp5rNbeWbWxS/WjE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.ae4f422b.0_1626479631697_0.040323457235075244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.90ff8057.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/snackbar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qoDfc2xa2moSoTZoFcTl9CXzjMLgw1Cn3j5k+ds8BYXgZaoV7xlYqHosx/LvCaZumHlMtPPXFHyC3xN5o4UISQ==","shasum":"03496f0b7bd50cb13673d8d3d86fdc34ccb1f44b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.90ff8057.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcVCRA9TVsSAnZWagAAX/0P/AxMDR/r7tp1xF0VzQ0J\nL8V5OoDKZE/TA0SCon+bgucQZHAbet094rlBCNA/pNpQZ2ALL3p31MHTfp4L\nlvJ5cIsINQZfocVf7Eqb+htz0uojkVbhS/CFGWEk2sIoblA381ed8IqaYcP4\n7jwot0B3g9cbYd5mxIQheC8Yjbt+fz48fbslVWkSjAHMmEW1XEO7bSXYOcsa\n3ij7Bl4x5QK1jP+r6N47XS+OjfYYN5UCzfoD0WvmHk6AYKW1bs4s7jqjWEmK\np1pBEJY3q28022oTNiNsUAyrHPi2jPBWU+HDHdQ/atGDp7m3CdVXlWaXaWPc\nNpD6/yEYOKOmgaVuyXd55x3pjMd9Bdpu+l6UZ9J0IZP7gQbFCuROx/916TV/\n22/eD9nOjK29EkuajdgNoH04kxbnUwgCLu/9+OxNs3PrBZRPw+GcW0FQrXJQ\nuY6pqLU0qA5Nu1nFBV6Ke3BSKGM6ngjYvPhjRxTG4CZj+JHvNLWf8YPG2623\n1cJM6DEkulRRjC5IdLk4c8AmYqIM+msW8ZfpU6ieX8BcCZXUgTcUaSkcDuxp\nZA5L0b48ILSRJwFWtfu78yadLB4NaUurD7g65iLxo6fScKhUb+YOXe9XRGPi\n/jwe38SXUqGHK1Jcd+ZrS8TMz6+KclDJbPQSRKgk6wj7Bkj4u0G5lAorBUTH\n5Cdn\r\n=tDFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcHlZxEJcygzoFLOaTeInLGGXADoIfnUJbQuqcKjCC3AIgCwJswMZL472aVWR9Xz2ICyU5XZcqzUzzozwjC1I/CTQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.90ff8057.0_1626703637101_0.663134556613808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/snackbar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j9gBrhkd+msmIQBu509WV5QS9aOGtD5by7/eK3A1h5CVkmkED03mjv3SPWTtq5b9LUG/DgrjXe5BH+GcgFb9FQ==","shasum":"211aeb573376d069071982e41b46896c1270df2d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.dd7b75d1.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bthCRA9TVsSAnZWagAAfdIP/3yeQmQs55DmzqO/uNjn\nvh1ISo+37l0c3dx4SAyA8QQ/8KgcRAQRDFI3tTylgwdaEyG5FsogxO0dlg2H\nUquDahS8VpVk01XUKhNqaxXoZuwaDuiBQRW0kOq/0xKNB6kn3BgcbR9piSUZ\nCmeKDb9WwMaQggm2JketBsnORC8pEeH39fuCjxwaL0PXOGhn9+MF888jQTyg\nYZxKI6WgaXEzCSPSq073JkcqSevx1MzQ5+K2o9rP9wH9nt25krv9soA9vmQo\n5ELJcxujf0PXZ/KFVRWz55DijVSbkoRAWOben96Bow3rIlBhomlD/iwGLBCo\n/72mWsI+azUAy68ha6hKN3ReSorgMz7Oepl7k4setAvacL1zSVRPjkO85MIi\nX9hvWCNoYrksZ4zdM6w8T8vd/es3P8Mw+ayLcf+JoJnOOUY5faBpIK01v7rR\n0T9cKZRD3pY1qaPYCA3QQbDTGC1vMQcXm6fYUgTbuQPHUINWl/h9lgD8G+0P\nTNhCkJzPuc1CyLT2VL7XIfEt4gP5+BB0EpPqMIz/NScITgjTjdmlqWE+yMJX\n0zg4zdTPV7yXf86V8oOhQxNfeXf7fujUGNRymoADmaUU9I0eFdByPiM8wQip\n6CnWqGjhmuL2/5CJbnx9Pj9UH096FDMbC3sBr3dQEO83P/O1lDCZ+LjxU9K3\n8cWf\r\n=yNoy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALiENFDPsV3pchrmzmBgZrLZyC65F18R2fKTObBYbTzAiBKqkKw0/c7xcogbgyAXPAoKyWfh/TLyjZgQZ/D3yLnKQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.dd7b75d1.0_1626717025294_0.7150201630800557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.104debd5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/snackbar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/2FKOich+vdCrl5GTaeTAj5ho+kNYvJleaGlkC2a3u4XaDA16Cxay/0SlPrOdAbjzw4gZveEf4qukE54mA/TQA==","shasum":"c697f8b846b0145fd73569f0f052b1502f1fb1ca","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.104debd5.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJiCRA9TVsSAnZWagAAbHoP/0xhw6b6z7FPHS2y86Mz\nsyYDgfgJ4a7EbCiVcquzeYDn/K2ZT20SLaXCztPTBYotXHKKV2mqiipultq6\nK6apA3vczSK+2Dwxj9DdHKG11QCYVzOkzCVZ8DirjwxHpoSB+HVGSzq7UVLH\nE9q2vEhG1fkNnGL1WD/T0LJPPNMLhupX+RJUPnCBrvhTonOr5pcUB3rMqcyC\nBvbZviv1CxNHOdCyJRkKrJ53NeQtqvmBXnEeW14npvpl9DYbQyY7LuYcbAYY\nothA3kjiupa6JbvarVCZ/d/r1W11Hq7d4xKEAlQQcwqCCwV92MwI+o7NYTMr\nWWO9rZeQgRGkZURNEF0ptNUGyPaijK/ZXX5QbeuTApnM2z8+novjO8pFC9ca\nw1ZKXst0lWRpK8ZZL+VcEB2bMZtgfmifD01KcuDyJMOWzOWkHssUhvwwsu4Y\n0X7z8xFEsTNwUSOiV495CmYpsWt+UO2hmyWAuWD44r/2wh3/R0f8M7TcHkXv\nClgnbVQMaE4mKurWHaqYWLC5LtAu467DqAFgo4v5XbBVpK622Oao244HuGd8\n7Q2p4d88xfLZU8jW2WAL0RWusoy3lBKj7g4tZlHLGWHWxaC/oWc6EMDKdvsk\nI78vkyZzPPPmYDTXZB0zZ8pf7q+efpodxBvVK8fzQgySOCOuHKxOhrajw3DJ\nx0cG\r\n=g+O9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzp61BMeBgOul2TthHXnj0pewl1CNyadJ4XL/gKamT2gIhAIEaW+KDxiIfY9TQWLhEWhZ6LPFa8Oc5qiZd3yJDVoTV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.104debd5.0_1626735202702_0.9776493735867218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.4612705d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/snackbar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Rq9NqC0SVgJgYs3OmWnYDKhWYl5EMfE6ED/9JMgzutWewr1C6HXStH5BTA+FtHOTF/IBHrkTxux8pyiM6tcRdw==","shasum":"529185f1141efe9a76b704de1c766e4c298bf31f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.4612705d.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQJCRA9TVsSAnZWagAAdnsP/AgxEfTHClo9mKbVO15u\ntSqyp1bLcZAliXY20ntdXPyzEtQYGZd8GcBvaBm3ltY1I4Zdj8woCIqXWyYu\nqlKVvxTa6R6DadVipSD5SBNrRYkCx5/wzSpNPeE8ce46SyvUW4lV81rdIj0R\nFLvyPGBXQ6NvxBWB7XjJCdfSya2Ffn2sZuzB8ZMLUT/7NRMxZMf0bKT8tw5W\n78RHmqUMsoPOGbeI/LG+WUjZuTm/zHG6uFA0WO0CtZzg2jvEnxLJTV22Zrib\nNBPE6FqMIIcsd0Fv7tACd2jeBYnDXLjLYf5siqHfb4WyzDESKlnPoJzr/gIC\nIwhUbSciQkvFA+cQp6KuvDSLcHTk7vm7tAKY/02qVJFlQ3JXx7eMssb5YzFn\ntUQKgZP/Y/lp9gK3JsYTYIHxMYARyBO987scmo8pk0kHjUgUFzmIysOBBggC\n2br+V3/tU0NLjl3c1rhe58OEnWl0JcJWFDcLdIADiCMC5Qn1/SL8+74V0jB+\nL4Lg1HtG9LC5o0zfsMveyZo6O5BrIvdCWXe8Wvk0gdWgoVGppgQbZkdoDe3B\nMVmodL/wds6xjz1nWFiqbHFmPdxprY0ZWuebjToUNKHr4BhtHpvybbOpHCd6\nA7E38T0Y9jPk9BXbzIUMf04AvCBYTNa4BdOaxteqcUFAITyarVkkLhYbFYAe\nYCFU\r\n=cBEo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBn3O1msAIjWjFxeqmfqQBcXt4dZSV34wL17OS3yYIzRAiEAjpLMNbk7oD1QzzH9a6+9Dd9brv1HrhstX9KgYKLd2BY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.4612705d.0_1626797065856_0.06119411376617778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.b36502a2.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/snackbar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k8oKP6UbM/do9SByIAqIca5Ro9QOZcyYjbBjCeryiiI/dK4x2oy2406UZ2fVhAJRK0InSrN3KiXhHcctgNRHxg==","shasum":"afb600c7bc742f487a55429edb72ebe348d77453","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.b36502a2.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KDuCRA9TVsSAnZWagAAbk8P/RRpsRMP+Zizk0aMv+9A\n3J5Y+IRYVFHbw97o4e6IX9JgcvmQu4yipO8HKhUQ6XHpnnN4ma3ASUOBBWZE\n4RXFgTbmleeKPkVd2D0cl1BF0wfSQt5c5eO8kL3XwDvnCI7P3cb7kJikXHy5\nn3PxsgrrjyeuwJk88zvjApi+QdzWPACvcX/a0XapHT0szKqXGXfqh2l4ZqEz\nOrglqTfS78VOC9UaIkmmK7xOhVOwzcMAtDUdwqzA5SNy8x45VEGkPDnGsLwG\nblbW9Dj+6zboiREWq3X1cQnZ+XLxZDcSO54rTY4PVcgDfgHO2FyJkZe8tNjf\nuWNYjSGW0ArRMuZVc4uEg6RCuUbBCOcuIAAYzCi8yIuFORRJ2YcBR8lrm1RJ\nvdODbCPqjdsOWjgJA91iY88FGZbsUzjeQBL6H790xwDnE8JJuxT5UcLykX9R\n00GkxklA1GoJ1edjzTqohRtVyhaYJKDZefXVt1c/jAvBZ1JIsVedkriZFJk6\nlDumWq4u9fLIk4vmLBTTq/ZS88klmWjNAd1t4OZm0FbAMpKCK5YqPg4ITw+3\nVugMY/NFVSSDB3YddmleOJzDSIu7h+3YRt6o5Vkm7w5Z4D99wV6Jm3cmAyXB\nz8yU0YlD413CqwUnawwujmznLy1kUAPj0vtamL9XREPvvUilQDUWE3OER+7r\ncmbd\r\n=JRPk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdHGVv6wkiR7rpuij3HcKdXY+VE/BGhTHVaLZkf/TVqwIhAIDHslDIOFmKg5RuSbkuO2yvnsAY2dspMzrgunrNqFq1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.b36502a2.0_1626906862709_0.2979901248036083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.2c392ab3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/snackbar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/xhM5TyuGgz9Ru/USZbMj80pDFJwxh61EGBP4vxxQrnZvtd/AzwwkTiimy8UVBijJOD3yFKy+Cw/mbvmqJ1+kg==","shasum":"fdcf454d81d2ec9d7e5b8cbcc951ac65c5635504","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.2c392ab3.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YY7CRA9TVsSAnZWagAAQjUP/1iGYbyhCn3qHoqYt7V5\nFMjbFzXeRlPrinN5W9pLQ5qNfG7bPGYBexhR0jmUItmnJ681j7r6WKm879GS\n6qZTJSB4ofjb58orVz9ntlbxDjiPOuUcJD3f7VwpAgpV8hsFVK0rdCWv9khA\nE6dvokG4jWzXuCvJlznw9k5ZDbYkXR/T9QEJiJgjn4g8OcqjZlwgN4OAgFZQ\nwHcYFOftfrt45LaLhi0Ll6UUhHVNUH/oW9fc89oC8YCK2Ek8ZnzuKb67hRIH\n2gyIid4iheO8/zBwcNMHPBILlXA4r5DBmpNDwUfKDvp3oH9Or/QjtSFU4cgW\n2LrzwLCJWl3PbYav/UUyKDwo2/GQCfS8MbutnNexvetm6f/kAYHFhs0tqUFv\nDjLLcUNBl294qx343QeEsQ4XxMlUwJvU39frBII0nCISVtnsI3VRIzeR0GBN\nxNi9xxGG/IuBjrEc1QVJt9A4b/wLXA8RIYUymer8Mz9ccECOKpA1ENUj83tc\nXcTCkQO966A4oLSBp/UmIB4gexolknVtypc/jWjdJQKC3bbc0MEelyDWRmHt\nUkpV+muSqm/Q8x2jD7knU0IN/9JHEcENaBk3iM08Pr8qjleVVKOeC1RiTfqP\nJTIxqYL32uq4ff2QRaQbGT38zw9s6fccNP8cufnRfuQUfMyjmGfSRZzD8gK6\nIvDX\r\n=2KSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5VKAFWYNUjqcDV09yPYrpHg27Hq3OjpXM9ff2nvjRVAiAKs8sjiZWe5m1a4a9eEjZ9+upSJdQ7Ruo0xBzLamte5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.2c392ab3.0_1626965563082_0.11449717834630313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.e8bac95a.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/snackbar":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.5f00e454a.0","@material/rtl":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IylRbrdC9a2RLhToHbXr3WY8GG0FCyuDuc/K5Hl8202QVofFNoHWFieqI0ljfoQ5Hb7mCtxSIQ+LVLT9yd3T9Q==","shasum":"97a0cde891074f06b1b0a13302d3cde768e06383","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.e8bac95a.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b56CRA9TVsSAnZWagAArkEP/j1XJz3AmZESdT1zdbOQ\nAUuaNoT1tqMc43+jQdcc08TdglELxauNBlQZVpoFlvj2GYBqqutNndtlhsNG\nx7kQC0CLYAQVL9bKXoVTcj6iJhPJ6of9Qb/4JCYQj9GH179iEpHmYkk/iajE\n3eIuYgQfLKhv/1kv+qboEq4OwAAMXvYbDut6pw1ARGQEC8Y6DSNVAlNSxsH+\ntVHwgC86Fz1lep6wRVLdJ5/kH8yVd7TFnnVFbFFD+InW+LFSbhuB7lXZSsbm\ngXVAy5Uyrzcnyx/Ri3Ej2yFiEIaDHFjJ3I23TZnsk5a0dr5XkBNHFcW5Memo\nleqlIsIhEF1sov6sz0/paGbeewc3YqdVtiaPOZR5V2/HyVypaBIJ6ZfQApF/\ngA+9IZFbi6evBFvWg1pF21U6iKVtB8kcdQ18Pcg4fD5K15ErrhNn73SwfqQH\nz5GlNT4ItKvIYSI9YO8iPvYWdYZ52MJ86iGaZhcsBGtb+M6REov9/rjb8/5S\nihw7TYabimJadimF9/vd5CmTS8GcQTnW0CcWXtCzu3Kg3cDdq/TX9r8bR1Ge\nG5pg2K1d1jhdVYVckE+32RYrf2x/Ntve/kHMkMXEt/mM/tw/IVzMwk40i2+L\nm0ijExAUP3h1QN14W3pK51tRcIZWR8BtfYEH/AaCRXMNcECCoSbHGlLqnOG+\nubsk\r\n=FK7d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBziOngz9jiAt9yjh14quEudMcEN0Sjd7vy7p3myoh3sAiEAthF9l9KmllvhPxMpJKFd85sgjYeF6CSZkfpVk6/bgp4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.e8bac95a.0_1626979962659_0.9276227861361597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.38f29f8f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/snackbar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YUlO31QCdkRwRFER1yYQab595g3WwNkOaEFili9yg9Ri0r06xK28njhu4x3jnNEkAWifQ5V0Pb391PO7edv7bQ==","shasum":"40a45373a252141bc7787f5ee8e2be43df652119","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.38f29f8f.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdWCRA9TVsSAnZWagAARowP/RoVDndLgWfVboWjCXBB\nHEqOHQnS6b4XIyzDweIdw7pUNEnFT7M652sL5XvBCQR91VV/eg2O8E4xjD6T\nv2xIKYw7HGmhtN4u9mI4fnjLABopFyOooZuIw7E2svz0NMA2HqM0G/X2txCv\nDJPnr7lQlhOp24ErnD3tG017E9iDRUEZ0Oqes78tZBftquQLlj26fwxB+As6\n1DmyWqmNB/f7iwueT8F6WO1VtM3nrxyA9g5YLoAcwHGOOybmXC89F+7y1UAZ\nJQQgGWK4xpofuNhhFbdiD60Lgkcd9OQvp8/mRC1env7SHKhLTMTaLRX3sr7D\ne/1P0LuWBizf/rjvbvHIjG58/D2m3UEsG31j+kN+GLcArl3z3DDZiPjI+K7Q\nn9/1iwASZVZYLF1znu/yzxSP1kpRMdHd9uTauEdHOrcIJ5rbIARcZGOTkJlA\nrT94GOYq7KhULG37Mgm3wp74aX4YmhFmbqdBRCD16bfeV7V4Ne143uRdFWCp\nnf6yvIrlUfMLRMXm6AfnTxEWohedlyuHZ+h1Uf44RqfUpDnxLuLuVeZLqDsw\nz7mPZHsHaF1E2Dl9NSLEJfOGc6q+g2J1+9gKkydIyOdOMPgbYVumZAy7uZv0\nJmU756v9JsezxM7zBLYnbaVve9WAC/T6jDahjWtXuHfjF0lSQ/owNwl+wvqJ\nAFRD\r\n=vUTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5YlZu90w+UGHJ2pJ9vw16bWWmuwbmOgq98yhUfkq/jAiADWZN3x2G0Qgrf0qHz+WGFmDu4Q5X8kXS0ZmFpKZsyFg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.38f29f8f.0_1627064150405_0.31008765131634286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.e0693475.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/snackbar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I4K/5R/BpaM7mGgSoW8h4xhAm9PvZ/9vNfSAvoWhB2ZdVCaMd8GsrB8vRr2H7nUt86IIUCurhyEHdcaENfinyA==","shasum":"f355cad57dd5fe23b2fff004984451d0c678e9a9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.e0693475.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xC/CRA9TVsSAnZWagAAdaIQAJjqL+GjWl8mKLjdvF5x\nBAuA/RcE2Kw7G69VFPDvlX7m4AxOKTKEzDBFgpU+KcNj99Ks5H7CIkireIZe\n4wR108KBNXLnb8AnTJh+YyZ86oEiVJiy2ZUDotF9idzMyj501WVVF1QdC6M0\nmBRihgIlD6pOzU2QzHr0Hf7+fBvzuMe7el2OLmSDAbfGRL2EaBgRdSFFtieS\nnWrj7VDBrMNN6cQJhYKbV/N0+O2+vYczaejcu3Y9KECL+0xEewTyJJGgjR+L\nlI4xTq4lDwIwNwyOPwCoUMOMzoddYYkU3Eq7Cd1veN4hbxHh05jhmNVzYXGq\nAI0FFYmtgKkw8btsqSywRWJmpAspuF3VqvuoYlCDCKUgV+do1N8PhT74o3jh\nABZ9aES/NkS6TZvjMsLOhB1YiO1d3jtLnTyTFPeIXvgohl9mdlnjydoHMcyA\ne7sAnB0SC+38V0lVyq7BbzsKWzvTDk1ugC2U8ZVUqQpN1tEKsCR1FJteUcXG\n+DR7i7i5TMSL0+0uYxM4SVSAdVyWyacnXa9XhKqCnMzBaUK5aSEv5pjP18g3\n2dd1u8EyjwgecH+dhRIDh5HZDNQuIukNE1Zh8AABRdr69JWmyoDSR3F0XKGi\neLnG/mlppb8zdrkf2Mvmjlr8PpNAITlEDKgBZhyC1d/MDdXpaO8skZeNxjAd\n6hX1\r\n=tWNU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLr5E0FHlcyGhX5HGki5O4Hnzmwrb0qeEyf2v7yKeMuAiB2gU9HsGuP6eNx5CBIF1E3lJUizQvCSMdQly31uQQcCA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.e0693475.0_1627066559015_0.28467218301776387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.d595e030.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/snackbar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BfO1HuntFhUWky/js0bkmgIoiABRT175+VSQCj3jtCkHjRSviPlTSZ72hYZHh54P8e9cIaloklwUKiNc6kgf0w==","shasum":"e43232eed7fd2d4aaa63696cc317200b6f0885de","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.d595e030.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ywtCRA9TVsSAnZWagAAvNQP/3QRX5aCjevaVCq0+REA\nxVf+hMBVrcIMd11YzKEVDF1SANIOLWdHYWCRjvxYJBzQup6HxCBGAn4qllZE\nhwVwxJXVkbKuiBlT3oO4RtNU6wTza471CsheitnQlh2ijln7O5NkTgrrIJRA\ny0cpwCDT+a98fvhzoTd7RPg9jlULEsrhDqZzx8NSt6QXqL9zMtFfEcYR9Um4\n46YFYlznc+gMGQJnUcKn/O6yb5Zaa1UrjR7tRTQoVy42yJiOYPX88C9+Kexq\ne86Krs4reL6AC+slU7vh+6AlJWBKkrLfxidZJOf4i6AbnigkCDi/M65wk+Iw\nEq1HL60VTE2yxWSTu8Z9By1aho3UhQTY8DsYHxwY0l8QPJwBonK0TDPv6i6f\nBFz/InrIkoaMWFhT/xTrgegVTR/bD9MI+o+ky1GikgdnKbKXr84gyKe4txlt\nLp/18UwosDddH7CDOqKk/EoghkBW+o4mfPTlwR3EDdnMVY7P8uktftgTjx0W\nXqCZaxvYgV9WUy7poVc2i9YkYBDehNmyl2+BczU7oglMFX7gwo3qYBgAJnpt\nxnNsEy4+rOBGYpbMhD+bFxfxlFGWpxwjU4hFOrdZcH/Amm8yTnyVcMbGbCU9\n7vp2K/d3D1H1lETHwPHe3LCK2T5pAtJ230Uk3SM5IW0rqzsvLRGH2oHkihvs\nOpcz\r\n=gx3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBmBgOMPMKsn3GVpGy5LDvLfktc18sez8Hj93qYmOpZAiEAvQLp73/NRs8kpXc/gVi3Am/pnhag2jdtsgETJYKKJ94="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.d595e030.0_1627073581641_0.026775046901658772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.fe7cca31.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/snackbar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SRa+6Ql4fJOFoeLXctjag+WbhHe6JN2cqPa26BWGnVxApexc3I5bvQpxH+fGyOC2POMjO0L24eL+B5Wy3Geddg==","shasum":"4c2c1d96e21ebca9f946b70c32636afa513afa89","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.fe7cca31.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsUCRA9TVsSAnZWagAAFMIP/Ru4TYcgJ9GeGr+IKwAT\nNjBnBnDiPN2ACJCs76R/QjU/juZdoAJuQRxR2NpFgAfIXs3t5v/GokyrNCHj\nj1UXw5LeBz+KxGJtYVBU1qFtOvVv8gJOBHBBHRjx0GIRVoU26NWyRGP3GZ1E\n5F4TpKysYTtF1EO9QNJH75vurUgtN85Jn6tYlK5vjHbqXioEWMyvUxHHvozs\ng59HgltoWjj7kaYyy0PK3YlAAx4edUTj35OH2zsqoTSTCte9ArGgBtbjkiTw\nQyyOizRJgHEP+p1TwRhEsQTsMNluvTXydsLFVNPi8iq0n1B5fUr54/o8hrtK\nCzhHUS+jJW0mRqIEopi2fHPnhlb/9jonD6zFqbZDYrbXzLEMICjkTAv3x7HD\nQqdNU35M0AZjRqTtzY4KfLK3x4tCEYNifLf9SG7k3yfsUuH4hyRC7b/KT/V1\n8jLJfnCBDH3g3m42T7Czl2fV/PdGygPJ4AWw+C20BvjpSq0WDYuc0fZxaH9B\ngXKl2N7TRKody44Tc11LIkQI/j3I4Kmlz+I9GAtn4hVLSrfNONhlLqGNPEue\nQlYlvfqd6Jrrzz2dpMqzrWRxWXlEaBGATJ+jLGdwHCxbDQX/+/Nor0rW/KVC\nDAAj5X4AXobHCHp93WAy85kP2JxR8mkF4rFnC9TA7D16lKEd2mkOBJqePJ4R\nxVfR\r\n=Nzc3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtI0cTZPBEoS9poaUq/d1o3eJIjqslq+hxuAO0eqVdSQIhANKL6BsaLEUZRfDk/fZwJ8hZGPrXsn6yMslPsHwJdhAD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.fe7cca31.0_1627077396425_0.10062067387131202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.fd9da483.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/snackbar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SrKnPiK9WqxHIKb8xG3tIIEqjWMw64V5VY9XxbJ0PoOBPJ0IOuzTC22Gmmp6maLD2LcHMS5Blrup6c3Exbgv/A==","shasum":"747fa83c5dacc9f545504af0095a56a1bfa2cdf3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.fd9da483.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygSCRA9TVsSAnZWagAAusEP/RiyxAolCLOsfySanjVv\nOv8Je355+SbkBcO0EHPnIaaPdg/p9sIdyA8v/DnxW0TYTOu8I2+J60/2Q/Tx\n/KsuSAm3tBIe33K4dv3QTWnmfRbjM3hw4hmZwvkuVaiMeuT3O9NrACvEn4qr\nAuzt7OofMCEmIPbvaopNlYZ9qBQDPn2/BYrt1Q6h8omonf9rz6oQijNBwCf0\ndVF7wXdNDoJcQedVZ2q8XjQxfW9k80LpfxhZZh30RKZllWDVFk0snBhyzzdT\nWeTCxS/JDheRoAMJrqALGbBMLOUbCPmCoCzu8vDzIxhUPSF+ZxMY6UFFrnxX\nFKkQMdh7Fszamlu31mQoj2A/4MBBoG+9Tf5JFknTGE8y+6ldD7SbP4OuT5rj\nF9tvmKzkhCp4QG1QjMjg1tBOFNayCKvkEmO3dJ3a61IH4uTcjY9vBqNWGWWO\n1V4Us9tX9a1OS0Kr+6xAh1C1Q68ZQ6qxhwhsAJ30EmKzUK4RotnOBVe22E0P\nLmXQGX1T92h8dmkABwyiOH4vmxE9OHjLYJkv1CY8Xug1rDsG9CZ9iZDiBCIE\nT7wLFGxiL+VAPMNXshpYpVi21WywKveXsCWbU46sd9NqiqBP/kf7KNPn3sDg\n5M0Epi2OLKu7Qpb9ybujHEGXpqLYDCW99IdJpYc5MdO1PTqHkX6NMMnMGjFd\ns3KQ\r\n=rH7k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLUxKY1Ab74cVMGCY2aneOUNUIQcC8Gb2XL6VS/YuGsAIgaIU4k6cHD0HO5Jc0j3DKXgL9bqMTBxMfM1+XqQ/qrPE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.fd9da483.0_1627334674269_0.9376670297723086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/snackbar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AVkv+WPIgDXmSzKMRZ13K9luQAm2K9IW0tQVTIQ9Yz3FybIFN7zpzN57qULngjY+evBmYgXhvddWSvRzYC7YKg==","shasum":"42b210b81af45ebc75a6ab67bd9c77874570a6e8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.8a4c7e06.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zqlCRA9TVsSAnZWagAAdf8QAIj/Z6d3VgwTwetRHasX\n2hhVV5fHlAaeeW0mIb/5HJjJQuL41jcXOCSw9wWvxpuCGGa7wD9VzTksUIt5\nXM7XVWjAlxzRlTjefNiBfkXq7czDs4V4aCT626sY1xBLPmlhVEY0NeGN3jRu\n5I8S822pGGoWtc2pV/jASejQ86KD5w/EwCXKCvqDYZvJulO+XDX9K1Qq2a/J\n1hlPIblXFtS7dFOCHhFoQC81UMYDrUeGxxQPt8EjupnUemCC59jRE0fuhjXl\njDb+SLHcJ23TV1fFapRZMimSFOaw4FjEYmtuVsMSlo9GSHDwXpgStfqo70ct\nbL4i5Cw7Ccq0ogLCr6ReDNckaUy0UITDaHUzKJlVfMvMpcQzIlkvbx3mLBK1\nmIPxRFzjGHMNKMtfGtpf19frpa0Ot8594iYUA0JM/7RoBaPRPNMZ1MaZshR9\nWjm7fs4uJOJhOwgyH5lVZokk8BhE8SBv+Vwa4qeXjUfV3pa1YICeoJCyLkvl\ns7Vyzn+UgmuesnXwtp+jsk+xxkHI7x2FelL8hFPfu0b6KqPcImOGheuap0Ef\nCyYZlUQBE6xl8tCPDLLAMWqbPrlIDWooJ9k8Rm5Oo3jyUfaC2lX5FFQwmnXu\n3e3MQWBUTlEprM0X22HMR21YVtCSk4abtOechVkqjw1Bj9ktp0vBrL9Q2Nvx\n2L/r\r\n=JGIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDP+e+8GUdeZtcYf9BquxDqXKKc3STsdJkJ6a+WsfgScAiBi7zmKGsN8vTrIXYNos5W44GsWlUo7nHRLM9dxEWXSpQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.8a4c7e06.0_1627339429436_0.3168276837858415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.5b395fd1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/snackbar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-umVRpB2YgtAtG6nKatF/BKcaHvDKR9tItVkvdZsW1iEzfqElR6K9KD6tl0w5/xubB4RXWimsaCTTq/+FAZBtYg==","shasum":"c7a6efe137313c5a470ecbdb6da5a5a3be7a48ad","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.5b395fd1.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5DCRA9TVsSAnZWagAAKr8QAJqv9KS7YofWhNHTsUPo\noXV0dQ/NjUmI8wcB5siEgj6ZI7p9IxFNe0X4eAtrvMmy7vfwO0kecCSukOka\ns4+gcghdpNJkd22cpWKjyhr9BGq/4vEjVDVMQK/j/tLEFY9cVCgpjGzrFtGg\nrYbLh5znfMGutucvxB55LLadHPzXyJOjuMPyP9dDdQq9//hn2gT7B8hcHiT5\nh4ysCxw73Hlmt9Z0PJPFGVcC5vWFMOX7c3Dwu/WK9EZRa0+owTMW7BMJ5E+I\ns0BG2REuQcuDI3Ba3Ufj0ovweWgbS2F9G4WTtKT57pps1/s5gnRRfK7lUSMJ\n6i1JaACzrvuCP2BFw5FB52b95teY06HTbXwkh6qrL/4E7nS7x8GSTmo46Q+E\npZ+Y4dukbz1eiSBwRJ9DAkEkghUdxO35/rW+kXOm94RvCya9C9Pmy1nIb+ry\njZ++naWQyJNNsx3X6ta+Ixl1JXO966qhEA1b+MaEBeYECmvWaSC8wE8/ioZO\nHgezQdcntZayCKObqwpBfzUmAQopdpOtd0QQjBcVaJYy6T1cnJ1vo+yU+fel\nygKY2Mnv8MM9zJxumKG9xIkNszcwNUd2NPVP7y5uQ1vTPTW0Ij0+IB76NWA7\n3iqh86IQ1qtFcGlPDUdYzuYiDne/7fKlPgO6Q5jfFX7cAMgEHO9OGxK8Uq8m\n26Ks\r\n=Vo/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnJVIv/OEAFz0PjWMV/M3cKQYO+qL+mbdn5BM6xgMQUwIhAIzvwawSssZ0ETea/7C7dG5c56wu38EHvY1tjJyyAUCl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.5b395fd1.0_1627426371293_0.17584343996894236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/snackbar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uDiUDvtSl7c42zsI0qLCXShgPLZ1lkuHx1yOWzYaLHHv4dIe7fVcoWsZg2emynTbB+wGPix/P7B0QwVrh5TDVw==","shasum":"cbccb9988bb2e44dc2b1d1f4f83e894a54d63a73","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.e5efdcc0.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZI+CRA9TVsSAnZWagAAPH8P/00a1Di3cfibihZLbPEL\nizOvO+trTYQXvBIvQL9eYJ9miEylAo9Op1y2ejOG48siUrnT3FocRfwpEPOg\nED/H+F+Yiwbw+yWvz6Kojf1a8H8n78mHkGGsqUPDQCnFdLDb7ZYMGzCRX1ZJ\nRJdLR8YAa6wzOM5w2atRtCVT0Q8K7QRoQ5tH1gRQ3YIdeXJZyYXY0En3jzhV\nZk8XrguBPbJRvgAP9JWrP7gw5RpJ3tivOXsucCbK+DMLB66joqgJA9SUkfMW\nE/Vm5Tx3u/s4O5qrb8Y1oTdE22Fw/W2OilBrw1ZRiVFuyr392cpu+neXy167\nzzDE4jEuGUwDUcWjJHJc5IykvpqOyR/oyv2ghYw0zek49NgCUZ34Li6fOhzF\ngYvnYCqSnToPSNVf6aZnc797wbSsMhmkqewSFNCp01Lw/BH0SLYVFy2yklmc\ngleWD7s7CP9QxLtVN/sKdpsIwVM1SpqUP6NXLOkmvxy/U7Jr3T7sN0zT5jtD\n+wI8Pt+zkeBXom8nXXiWW+/ZHb/KuJU1OP5z5j4HqSN+uvOurQ+ZlNYv7/TT\nxYSZj0LHbqxtCJJY0s6wF+fTgs3616j9dazKlRNNOl5esgPVWo+39DOeqhBN\nreshcbdgGIB5ch6ltcKYI9l7nHmYW8VIpjtHHWAwUDjetvlr0JTzA+WQAco3\nRasC\r\n=/yvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGloujjliQUTgs0hrxx+yPFe2d3CaW+3015CNd5iWNkWAiALt3FOlTKDGqxKraD8F6KKSBOjKVKKjnnkkPcmvmf8bg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.e5efdcc0.0_1627492926145_0.08621524820168047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.ab310900.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/snackbar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bi3AAIEF+Mw19dBR7ZsSMm4x9Z9Us5ntV94D4GKKnAacrV+ww9+ojd9Vm58Z03qtYVHKrIliy5B+40sN9/AVhQ==","shasum":"365299fabc246ef17fbdd6473a05320c4021cc26","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.ab310900.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbw0CRA9TVsSAnZWagAAVFgP/jWyVkK5wL1fgDJpgLs2\nzyOOeSV/vGqnwNYEH1+XY+fUG8v3OqFWc2K6cEJFbSTvz42yGoIdQsef/DXs\nVP0LTH00JgOX6N4rubHxWY1MUMB2KqEG7YfBXtrKuCrbdqQ+KOIjc/tj0qmQ\nfEWAjPNMA7AU1sJXqFB9ILE2j+bfjoEvNWvZ8IxR4Ki6on8w7+4eewiO4KA/\nl4orr79WfZtIZY4yaubIWHKrGPLlxGphKfZYZleam87+1BNcGQPXvpN6AHd8\nOsMylMzm6N1WOw2ItKrIN/HEkDm5H/Cmb1eT8yxmO/HooveqCflBsKEptoog\nkAvQ9tk27MlUhhXNYOguxhwxkBh2N5QRkBP8uTWZYkCJbXfyWjG+gTsaRbeQ\nIjUzgylZb2KabiYNb4AI7AqfOeiZnudajlOR4Cc59p1S+WDArm9T2nqE68Rb\nQEaAvmHUj/MndSH3+8uLQbMFK8pi4QHmCExbkEUkr9u2yBBcu2QYRJhuLapS\n26KCyfcvePPfovmH1iTcuEsNk+wEsBK15PU4pCi67J6vnGockhsBAt5fwzDY\nvWAMixYzSKiYucBX5qzFQKqbcpfqyrXPzWH28U4FzI/6cLfPhqX+j4ZGgl/5\n5etmvLP5tLNC0YDopwbRGFp3SQOj8wnlJQLEFhyaIuAjcGXlG8nZbS0BO3iW\nTC1G\r\n=ofHx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaZIp9Bv2FeavNQY9Jgt1hz/b/Vvi1xU5cOCfKr9ifDgIgAhL+Ezyl+5oVOk3GFafszhArptD5WVpBV6bD91QDT34="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.ab310900.0_1627503668592_0.3230203470034445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/snackbar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UtZ05Kno8msAza6/F5GINX0/pQVw2VnnULBGYeSsrI0RPa+6/u572VOoeUmm3YJ6w0aTimB/r34mjxe88JhTEg==","shasum":"5ba1871823108310057d3d685ee218aa4d9f9695","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.21dc9bc5.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1OCRA9TVsSAnZWagAA4sUQAKTr0ibBcmsbIOkCC6Ko\ncpNNdFpocygp52hN305fZzh+g2qek6VLe68hKTY8FIzK/+fe9axF08HfTA6P\npbJtG9G3QqMNoIwQHSijeKKP7d9Gq9G1CSQOqdhoST8jMAxxthEm7cbHMy27\nahAi4qiSC0jU+xLohrQU7xzG+BZWZxUzKVWRuXhAOMSxqS6W2eFKMzmsFuAz\nZoFjppwcbElXiVLvTL175cPvmA57cxHkVKblzLQ45/WBIRBqZBmOjXo6z+X+\ndHWVvNIWg1u3x9lxGpKfkgAO1ejU+y8RqgO8+jZiLVf2UoH5umO/Jv7slxVi\nU6LYdz+OEaozvFxb9A1BX/R9Ly63skvFLK8MbKjPCzaSIFvYIDwjz26REk/C\neM1doottYXF5L1+4Ke/lPz44oo2+vqaRChC9ixu3sVats8rBi7Q+bZ5SUgwm\nctQ9oaxi3RnNu5ICYyd3Rb0Ki8hRAQfkHnI43XczNt7k2Y0vfbOBrF7JePt2\n0VxBxjZ3hyp2kpLaIcULPItKNcvGbS/Wy0kqBznIyGK4M9sE+OyokN+veBAR\nuVGAqGYBY67z42rtxfBvpBLqUNUW30ItMfqxopcM+ioLYtmdIljWyeLx/y1V\nLXDVAZ9PVi9gTVb5WM5IabuE/mTyatU7PhU/dxRJRuQhXfH1dMFoRraMbLoz\nhv31\r\n=8Eez\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFMeSC6MGuG03A6FIm21sHm2zxTJErjgEY9NAgrsMQuAiBkEidC6b0JOwPRbfrHAOc2beELivApDIc9wXu8kQzNcA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.21dc9bc5.0_1627503950535_0.8139254113132051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/snackbar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FuGatxm0z0AuDV4oyvVXXPA7T+NDdJCCJtIti/ipzFny+TXwFsUWStQxTRW5z011noOvGj1sPJM4/IGqk6RIeg==","shasum":"3444dc448440514f785ec59cee06a28c46d83d9a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.68c7fe5c.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQECRA9TVsSAnZWagAAFb8QAJ2+4bcPsA+/JckjQ2Cw\nmfn/yTVR/b+G1XEcmnvfyghtf7J8oAGlmmW3tVlOYH96sXHby/WQ9OshBAfR\nXSS2bas5VQbRzXiR4fshZTVONNPnKw+pHSXBCG1HtEjgBreaGpPRmfIrMJfk\ni1Peq92zg6Rak8TQ8y9HQybicQljtCwDQ+S/hVxjxgiTAAadRIPeeQtDGDps\nMTFfxfkJztxqVgQsrv+AlWRekXFvXPZ5vfApWQTBw3BP4xIVftCZFAuhDkWJ\nOjwwrI+cW4jmoP4pQbfeFcF6Jat4GtTkC8Xtn3oq7cDWsjg8o/rIJ8ImhMEC\nunN8nvsncO2XUG7+EypdyXqW4KnBgnuKveZZjCbY+nOPGkGhvWNQ6OI1piLx\njbC8meUhtsRzDX3qqNcufBjb/Yis2EG06hjHDJLxj9PsWmA7ui2IrkG0XuHC\nbnPAaK5MDXxbYkaGF1lF37W46+dGtQnLitsy/lzM19evtYGPZR3rf4a2fJhO\nVDz87+hPQKMZXk8i/lDXcV4a5EitXH/H0oDpGKkxomd81HEu0FH2/s7yJj9p\nyvWIq9D4tMYZDX5ir2v5lqnYgBm1nT0uHoRv7o0+EWnuw9uFt2g37nfscJHR\nzMFrzO08F/GcLJerLid43gpB9xV8tIK8wB5kzjvbpprkYcc7JTO9c9rd+1dY\n/TFa\r\n=eZ5j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWZgqymvIu3CJGMyQxx8ShvzOtvxzd2T20QQbh69floAiBiYwhx1w8mc6IIRJBuy0aC6K2hWuJcZBeDhoU+imM1SA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.68c7fe5c.0_1627583492351_0.501653465681906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.aebe39e8.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/snackbar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FkDvHlO55QVzfjiHT+FAgLixu8nRyF4kjquaGoCXm4Tp30gmZ5I/jJHbguo4M5vmeQn10R4fuhmTq8sv8P502w==","shasum":"8816dd5f213f82098b644d1488d27057dc3892b4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.aebe39e8.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9aCRA9TVsSAnZWagAA9vIP/RXzZQ02vil+GqG/Gk86\nEnBYwO6rX7qFEtsZB9MdDTcKiH59cQyhUkLWRLqwrtMkUmdc1FaWjdfakhaf\nXfXUg2YrcYgQgQrHG9LwoBfH/Rb2uLNdc2VSPSFNbEplymWJ7LaK3HtvGJq/\nC5tiFfmqWxytjuC8P7wlWoN5RLbleHJRg7OtFhjMD2tkfxYVeOJOGhjj6IVr\nYnRh1J0iRcgPJd+90o4hcW2p49m/IDo+lKPZ0oehbmLRO+Hn3DmCU8gX4Te3\nKkA3r84fYgPB+7r9AM3yrMFgP/BTMZrw9KDSWAqTHfpWlQvWAC3cIzMs/RBK\nOVy0AwBGop/KCJRCzBD8B0Zhvp0Bcwr/hQyzihRtZR2mFh69a+v61DymzNQa\nHkGn2skNUZLExTNvGfj3ViKV3AOtX5V4aebZ63/1bcwhXT/10h7uPu/czPuX\n+keZPpl6V4m0MABZD5rizDQJggO+Z/x+Cn5tXeJ7KCWfs1NfNx4znEYsLlQH\ne0nVq4VtDjyltrBA/CC77/MnhQe75cgsSwheSon8v1duNVsZO8svXRASKNY9\nhM1BQ1idJdhzmnxqoiuz60Pfhb1P18z4Sz+juRQf8kYcX/HBDM8g83DdbwTj\nO471OlMKF8EarCn7QCfONWhzVm9zARDr4oQ5N2Sqf7PwVFMu/m/3Dtkh56H5\nBTjE\r\n=Q7gu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsmGSdOGuuezCw7Zfap4j96R0z1MFVnWzWIZ8U9vXl4AiA8odltejv0S319ui76/NC8zIgGnI6s1ZuEJrY8A6BajQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.aebe39e8.0_1627672410143_0.48858480175100705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.ea889c69.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/snackbar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7c7gKZpcA9MiYBuOP52EZETff2q0fETrCpwLsDHLvLWCGguoZ5kGLlygS9VD7xmw2TmS0KSo1aVUXjb7CgausA==","shasum":"d81ba415a5e5b0c6da1484d520ffd116721a1164","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.ea889c69.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9ECRA9TVsSAnZWagAAYVYP/1TPiNVbarIrdLGfF8/8\n/bMlgtQNoJ9jCk9GVeeutlKHXxyWgL00nbzYsfx2bHj9LNor+FhSSd6r/THt\nzQ/AEC/SME6prD7umwzjRWXqlD+ez5gNpBKOEYoG0MEYXmDpL+gQyNy8D07/\nX0xQ4lvF5YfOj0UNP+LycMcYL6eL1akvKEFikq24A1qiqn1VXF4yZLsy4CFJ\ntxPlGgjTxXJ7FTkBxoo8PPaLt4xhCHW1tulymPR0TRdfsYsnOGIip0uuixlU\nswLTFzNLO+ny67NU2g4W+Spbe9C3eelFcX3DC6tNphU1LSkr0HSxDCkkRAdA\nr7zM04i+Z+4towsrxC/JRBsNyZnx0AoZOMkdDNi93peFXrfQA4zNNEfpSMBX\n9KaVJWfj4v2wtA1CSl8Crhc64qvbGFe2eajoJXznS4WQkl/pLNlCCn5/RxX7\nppADbqRx9n/ZhmA1hr78jAPwWxwGGS8y2AL48qZ1lMSp+03uC8SVahUfm6qc\nu8LqAlU6E9gCVFi3HICaKbPEJaIp6jm3F04xgb+LWPmissXKsLV4pE6Z4IJW\nr8/GmPL/YeqIZko3zXHbnmv/77sJUaAbWb00myU2r1SUlSHRHhPKv4K65TXy\nhRfZpPyqQmutE+pkHsmDnToW/8Sg/GP1HpdCossWGc+1GnHRJqHNDnWLkBYH\nccQz\r\n=kpuc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBo0u2n8yE8qdFXGyCuCB+2am/488ncQOWNarFqQ6qWrAiB+cJC43Zv47HiUhrDDAuHRUsagsYgaAk9zOS3l75OU6g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.ea889c69.0_1628016452415_0.4999893734461589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.21918905.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/snackbar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FlaxXCER4ef53YQRlgnINWWKLhyXB+tIIy/skK3B87g+ZmLNWT3GL8N8ifljqThcSkxPBjAY/3COE01d/6plOw==","shasum":"3172fbb435dd448f8c1a80cb595b30e9b1316cdf","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.21918905.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbGkCRA9TVsSAnZWagAAW5QQAJ5n2LEsqRR4iEcRhYoe\n/74QIsyFK+jV5E5h5TNUlBJy6nknTw+tHraiBsIs0rEQIm5ZLVOzcN/eGLX6\nqLloETnsd741pnMxczmGyq4ez1ae4sCa3QlehW64hW8kiOalX5PxdIQbMhzB\ngFar4Yvb4T1e+IMVWSCZBLI2S/F8qElYfmPpU/aR+mt0JJ/pp/Up8KCo8cRv\nO/L8N9xBFjCFlwN/ePhN1izZETNY/9qQROaLI+TkwLDFhqXL6ptPKtApeLol\nZ7phj/z3d12Jb0sHoAVpFuvzWpDHpqeczv+Pn04I8txx1KIohgZ/ApP3I5nO\nib+Jn1Gx4isrsLIaHUhdPtdyLhiZIRtURkeLY0vEok9REqSXNJy3rKpA5nmt\n7a0r993FXO5Ma3Zi8hwW1Z35soJ3n1VCtvMndS7poohpPpTxY03gs2mcmB80\n/aduvjMR/3kGGq8Lk4Sjwf2QEMmiN3JESR4EJBrS+JTaRX8I9K7ols8N87Py\nmYz/VcXV7o0kHO5VxL0DFOIVbdKn7NoF4ERXKzvoc/R9/CBHEEIOj8UcKiBk\nWAwHSFQhul27Ymuq30yGtwjwpWL1NDD2Bs4kWp4XmvgsLrFl6cdE5jN2+iID\nQ6mNCXHd5FZv5pc35Oe2zuMirFNjTiY2GgD9ia6BxbKfOX+8GsHjYPYlrYx0\n/3vo\r\n=YlR0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGg1C2ZeDHqqfm1wdOjLaQrg8+9+Ckk0YeJxsNTIJobkAiBjC+PRwW+mTDJrGSkCPGPQQVi4EXYQd7U0MXmrE9aukg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.21918905.0_1628025252312_0.3113965272753245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.193c87be.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/snackbar":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.7c96e6b98.0","@material/rtl":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7Wl4T/SgrbYA7p74v3k/H8Ik0h6WrsaRMgPZuLMV11VyTU0b5gLGyIQtK5tkCaJxaaTBLZhpXqNh6Oo/F9DkGw==","shasum":"b36a54349c4f522d6886304e05f3508c1ae55d95","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.193c87be.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdcCRA9TVsSAnZWagAAiHMP/30nSbifnSBP1YHmhAPf\ns1YKBbEmDby78GiUl6H8FO0gFRe25Xv5ZlItyOvvN3JOPkuLFkyDHehg504j\njfzqdOyFGWFoZJIcw73IM/vssgehRhkt4EdGeZuuTKa783P9WxMllSNFFdNX\nhIkJdMdl/8y6+y3F13+ZiN9Y3b02pbqz5ibgUJWOybLDX33uPq8i93SBt7aA\ntH2ZcgUW2YUerbXuCo1bRloBpUr8bJ9YOHex+FkpuddLpj+QatdHzkkcyWU8\nnJgQ5IRWoqHjhXFDRZ0ijIUT4EStFq8U9u5pn6teaiYtsMRTYd3ny/yizfDE\nXoT0yRYd2Bqv9H73HioxDl4EzWWEMFZ1miWvpMC4EWmyfspLFmBEAzjJR4Br\nXV3cAen7P9CzTvAt7VNH55y/mUN4SG+jDLB3y6wOy68oHozyBE8uHfpH8bp9\n0nHEAAggq/mAfxJ4CBGcYW+Pzazi5sDi+2NAkk6fHHV8xc9LCctQqjNwufmI\nx9D8W1EDiszXjZCB3FJ+15hid2kj7W/bJTY42Y7pOO46s3YQSTzMdAeLd+/K\nE1LHpFcosE0oc4U0hIlQKYy++5/9v97GECfYVOPJgSNjYIgcz/YOnact2Vlw\nnq34eU34M6oSs4HiESedLYkT9l9Qp1TNuFSVaRLVuLyw8Fvdiw2LAnftubER\n4dzI\r\n=lCrR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkT7taU2GPtLrdnYGejfPpEPYgR3TyUFfayyI4NRMK3gIgNVx1IU2FPrQkhBOdi14oN3Z6/wkLPLN+RxvVS97eq8A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.193c87be.0_1628100444467_0.49552072285577986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/snackbar":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.3dd611091.0","@material/rtl":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GvBXMQK91R1P6a6FN6AjoRMD+3dlR0yAkl9jRWbVWUy4bnKqirZEXE9+W/IE1RhAZTq02Jgvp2K4zjMRiv9xpA==","shasum":"6bdec3c36f84bc3be028392fbaa1c487ca69529e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.6fc52d8b.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmfCRA9TVsSAnZWagAAg4AP/AnTwLKCtfJTHMdqhldk\n9w/eQKlLE9D5FcdB45y/5iqz0pgekji5c7S5z5t3BLIpmv7Eq4yn4T0g5xkP\nrr80gypEmp8tgPr1eJCVkLAtltNp7zStj/f/egucsIrzSlGLMGwCqsm8yjcZ\nAaPgkjelcbYOwC4SlYRxkDV8g0FaeG9rN1mCF6kwsyjimgez6B8pO7K/n+hf\npxx0/Y1VfuCug+PaRg1QgnGthzG9WqKK1MYqjLI4EeQt9AV0sVVSsgnIIlFf\n+zT1yppxt9zxKkoSkn8373TCg27MLaLeojekjx4B4C4xukilFMR+nzJRNotK\nGH2STJz6NU41vDhLpyFMmGhALbWgH1wHH8nE4GlBS/ItjBGg+XwMNoM9/f9N\nI65Pj3ChcUtibBEUYjYK/yBjhKjffyVUf67NL4bN7PhcS0aC3y3IECOcXn1P\nTpkPVz4GceAgw6U53aKBPP23nUBdQccKhUUALvF0U3AlYEN4qPZLC6x3S0sw\ngOmwUhtCDLIsoBIIkRnbffDcnqvPsV4HQ0IfQzREPrZYm+4dSwsje7MPd4oo\nGJKTOvJB+wsaTaLX+lFNxxLXTgQUrofJtcwRXjEZrEI+f2yw8WGB/C7oKphi\nPVzCZO5REA5MrhIXCET17Rds8zklEDxH6rJp1PPbiSOtoLSOHaxC6FZO1xGS\nIkqp\r\n=3OVV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJVE8PjOS1Yy7Vx7ViEfkypnnjBomJmVa4remyvvvmJAiEAhSC2Ctu7GlQipGfYGkZqfOKF/GzppQJyoorU6BxY+2g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.6fc52d8b.0_1628187039720_0.8732894636848385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.e2e9777d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/snackbar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JOrL8Na+dyo033WUYWE5SzfmHQp3vAK2VdWpHZNrEVDHNgRKCydsCl/BDvYUwrW7ciYZDMBEqMfSFuYy2/rugQ==","shasum":"8c66400884e91f48c785fe54f9f76e8f66e1f7c0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.e2e9777d.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGpxCRA9TVsSAnZWagAA3N0QAJP6E94pXXmrEFKxZ4ou\n4tfT0IOq9r2IyuLWCH5n7+ZGWloo9ptJkUZlwR92nai6Ut8KcluX9ONtBsmv\nDFE7612ug4mcz4yduO/RdzO/oCMIdWSYPY8aiLXYm0cIOYSuCPkQcHf+vxEh\naggVJcLXZqEso5HS8U0AL1XSVoH9oXtrT7RdVO0fVOXK1ru24OdSrF2CvCpE\nwmwAI1lDdF8w5JLlTFxzOPvP9U/+hmDAoTo/B+pFom7+bXaIwF/moCZXCj3g\nxixED9I2ae6Rj6JInYsuGZ1d/xGPi6tyBhm5Z5V7K33pn59xiJa8DHUfEho0\nOr7ZCHPj8waEVSHduaJEVcrLLxkzSiS30MotUgwfHzO2r4fGWc/1chEZqsT1\n/D/I/FsFL1sga/nL7i4Rw6WLRumIOyR/KamUIh4A0gf4t0TEv1H8Dm2qn0rC\n2D48Jj8SN4iaLXffPCZp4Mc09nBn9/cIQs8uGnHbW9IQiFCMsOZuivX6LkIq\nDN17XbsWoE1lGzf9mJwaeVyQKYxkgYZmmudT0Eyp/2OlIEalht67N1VwRv4p\noJduiLQ9w4DUGHMeLFLKtu79w9XVLmiuKcyPyg3jqY98KEXZDpKYf6YhngfY\nlrqHVQOY5fqjpTJta0cbEEMngimr6WN+gQ91HVMPrhfsVHdvsguzJh9tOBWL\nZ3x7\r\n=lRiG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYPFYIk4yIpXpEmQmbXJQsrU2nixIdTWaIoTnehucApwIhALD9LrIlvTwbZdP0LySbv2XfYZieVVUGftgSSmum3Vja"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.e2e9777d.0_1628203633056_0.9597211860152743"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.72ff1e68.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/snackbar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Aa5WCh64RoI+/t74XcnVFDuhLYcSesNtgylzoRTJ+Ib2g1TxOjjRwYumCW+cUOpAp991MAlEjQleURrJ42xnfA==","shasum":"4a6b0da4418586cdbb47f1e863d92b8d2dccbb4c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.72ff1e68.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAjCRA9TVsSAnZWagAAOyIQAIGZuyG1LQCqxkLPkk9d\nfmvYzbBjcLF1Iqob1GbCUYFeo/QUrCtxqebRh6TFa9WWdXIJtVYM22jYQ0rr\nCa2ppQf8uxoVmLrg/kssVa/g1d8hXNory832GOL2vT55YTF0D9nJ2v3iEiS8\nIXVA7giVandZHNLCCui+SPlquDxy5omsNAJshfF7WtyveEu7b9jYJzOv1Avr\nGffLj9KMdXZC2bgnzinQD024a9vDJtW8n19VLwVImIR+hoo/m/kGJWAHylCr\n+zTkQJNL8lTlqi86tnn2VVq0BFhm6JzDi6YbLl0wmOlRVTPfIAKEQWYlWXb4\n1NH12txz7trhjqKbGd76GHe+NLhHDYZhtVtby8ZB9C80Mh3qxhmTcEa9lD5W\nu/qpM8cSlikNKM4nlj96g0N3X4gXxtIhXGHNVILOg3jtHJ+NlbPiGvRwWpbD\n8MqROER5Agy5Z7xCWbfXPACr5Kl/TJXoF/W/GdtTUvPqHdpuHoH4P3brVROA\nkI0FkRFISZhgfZTVTFZBWVcv3dKnfC7QsgS3uvdE6rUG9/+Ql5vDoKNcO4Kq\n+O1nph0+GuTp6EFWJ19llVA4WbkEJyK6pFKco7b3nfVcHZWopWt4QIppY1+y\nQGmTiJzTVuhltTTGcbBWLwJ3sdFYpTon2NTq4dJe8zYnlJNj8iH+PTJ/zdF9\nxbIp\r\n=3Flh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvkdZzFbOktu/7rjGR9rWOIBkTy9hpdgKMZtGozeaNEAIgEWrmnDrHYqzl8nSJGOQCOMc0ylmnP1803UnANzg9BUU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.72ff1e68.0_1628282915281_0.9237632359444223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.c527e93b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/snackbar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xhT/M6wKi1EdOpPb6QTns25woJ9gXLhrMIujVqVRIaW+2SpILc0CIcQhG/eFsHOtp2vKznWeJ0kWR6YfyhCpdw==","shasum":"c90cc328ea406d073f685079c0e4fe9e7283a2c2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.c527e93b.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaU3CRA9TVsSAnZWagAALTAP/2QWf6r6Um6L2C97JSfG\nVIARAfaYcqFyxXiTexYVend/Wupn/pRu1ilMWG01Q/H0Ar2saGW7GW8Qdyge\nJK1UG25p4d26klDqA8+dXv4Ny/udLCzR9d/Z+bpLruud9kHIks9Zsgc3Y0db\n9X+RZmap2DFgwKiyMYadFew9TPKKtu3+XwilG8GUHXgdb/PN9lLtPa7cXnLP\nRRuD9jfIs23bwPrKyKozI+mVCjuN5Q3PBVIKfpuhof9DPE+qLGYBQQw34uqv\nHJtojMOjUVuboY1TF9LLWUe/tKDIKt6PeXePaK64nFTor3HkAPvD1cMl4ecY\nraa3MhOPwumdk9vSMrLl2RHl7nA6eZ4tfkfUVgWR2u694Ed6gCDZmnf9q0fj\nPivU3kmwPSmQgQBgB2787nvveXceiSAAPH19cgKOM+8D5qkBxSkyk1ffytDy\nfzzrQ9kpFSaIo4bm2UJyBk3kQcGTa9my//MT8/4Yd5Znz69UAx71latRZzFJ\n/wyI+uSGWtP1a7VCVLZMi9uErhIzjRyxHr77v7e6O28zizq3ZEEmrLfZxpL2\nXBNlBmWPXD0dvyb3A+vzcrqBr+AO5ySnKyIuQclsVt1IbinCC4QU5EP3VmVS\n4DrCuEkoeo55uXI0YLES291CE76Ed3amQEc09L3UPAPIkpgV0Uypf2vmQW9l\nIEA1\r\n=JzWF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxP+1ZuD0+pne8fimUAwRXE3hE1Scb8hr6jYJTVhrheAiEAtJFCieZ4OSLPoPK8AR8CxeeqFlHd5RdyhmHfID//hJc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.c527e93b.0_1628284215276_0.6345665345373657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.78b1eaac.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/snackbar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9fEa09r7NB6r9hkfyfe+omPbSql8KpdsT/sr71a8gEPDtQoORLE2M/APzkAy+HRSYOhe1MDojE09Umiy3Dq0qw==","shasum":"1c694990d13a59810efee25f4118fbbecae0e54d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.78b1eaac.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW36CRA9TVsSAnZWagAAPUUP/3fN61dVFTKIBnaXH/oS\nqVnpQ9wvphcD4VqdNCIw6L5ebKqkoJb2haRYcagzhAHSU7QOw8K5Q/OP75M5\nt9ex6n97SFiS6oQWV6ZaQpzfgLXHwxPtCogryDi2iWDceviBLnZYKQ3cuy4C\nvkjvfYJ1AP8ybJeEM6iKOQBsr29EuBKnBZFIcWPLp5zNP54B1WXVLgiw1TTq\nNpKUbmBy9QnA6uwri8lv/H5rjMuG+Fz7imVfr4KGKQStiByFm0h17m8KadJF\n+CHx7hxsC+WA1kEl5s6ZEOYsE7FqtzyMKwkxO5zSOcugHxdZoshvjuxQvA25\naqfnOEYC+UITprEG5iT9QCB4E1rj8KL7ZWO7Jwivz2Mxwyj7JdqX9h+xu8U4\ns4M47TdV8n/SO4cZAxUzVjC55C9S0oDN5zNNb3HnyMrtwG67XRYq0vGg4zOU\nTNaMKz1scmV/N0PWfKW8Z0wbpusRjFYIsc1KZTJKx5HAz2EDcPd7VKgJjKK/\nakcPHqpcgARpuP8CcrP0O9Gbp38GszzfVfhFNJRC0KBNm0Qq+v8Sv68wEaN6\nDHCz3/ureY/31cJ7EsHVZjSUJgEByy/+4ZBYwElnB1yb+/wrpXPx8nHyb72O\nau9Kc+AML1m3XuAflcs4f+xqXHa23YxC5ux8vKnvBo4Ie4TJg3M8NALVnHgG\nJtwA\r\n=AXRC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEs1SaGfq7Y80JvLPejY/hyB1NpprI1BXPAkiKSTnKrAiEA/44gvr2ypHAVpS4iTK7Vc5nH3HT12jazF096ocy8jNE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.78b1eaac.0_1628532218151_0.20745668576401477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/snackbar":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.7249a3060.0","@material/rtl":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/oEYco19E2zF7awg2Qol+FKintan6L00kG7yd1Ri9uSq7L9f+xlEaozKpnbgA7UdMDKAREfOzymLA5SrdWU3fw==","shasum":"ad715228fa152ac724d8beb26ecba9adec3e7b91","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmVCRA9TVsSAnZWagAAZwYP/AldWkQKeDtGLx1IT61Q\nV5IWjeJ6/naS9Y3Tu2vAG4VYIoRBCeqZX9Uln6aN8zS7otM+OTrbdJWlnfCg\nGuoEMpcS+zpuhDGydgFv5vKg+U9Du7E00G6vXbB/tLmMwYyQzktAfHYRpoUV\nnl+Xm5fIFnc6qa/2+gR+S1YuEN1DrqJwj7RWZ90ez+Bwh/crXtsho/1fGVWv\nojDn/ff0BYslXcSzjrIHuo5Wu6dyI5TTKxJzCVDhLK/dN/ha3kqOKxaHRjfV\n+8B7o5OVxnQQEcF/ic4SOvYY89zmr9JHa3/i8FIFe91pu+JDZyk2AoPNMw3M\ngakAXs8wlk4ixCjFve7MvLhEKefLbXM7pTqeCGrBU6xRHt1EhUSRtyxdI5qg\njiJOpTpKjtuirn9dIXhu51DiC8GVb+D6LZyyWhAF9YmYkuQff80a2EC4EGxA\nlw7K4Lk9PBp2kcqEzcIMg3KyaGI3iWVcJABHYbwschqYPSO9x/N15Cl99XAA\n051TgvOBQY5LB7/i4vuAplcCITrTKjvDRKt0DTRDNgXpkZcDNnvUYDZJcudD\n2dJyHcjWBaOjpdV1qx6zyak29BWzeY6VjRsfLW73Av40cX77A3P4SGDamUfm\npyr5v9O2s1XFT9axk79ldlfQSYMsbdzEG+xI54byxWAkmD4AS6SPs1Fj/eIN\nnpEm\r\n=mOoY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/u1u573nw8iGEuNw32WErbvdOeuXGzWtMsj1HsMp96gIgP0qH/QwdRULdLDYlb2Zq9Jg64trrWymDU6U+URNhYFo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.a8a4ddc9.0_1628621205720_0.31481553018297626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.99fc0632.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/snackbar":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.f4241a42a.0","@material/rtl":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-viJk24xUhjjZUI7hjViRabZfBdKqpoFHymPIdhlHKhJhkLvi0k4fnCAqjmWFFlhwQKQTx6KFWKPUmNLtcg1EBA==","shasum":"cdce92fcfa00fad6bfa71e897095656e21311ead","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.99fc0632.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE1mCRA9TVsSAnZWagAADAsP/RH5Kinc6tumBUn86aHQ\nA/obKTL7XcCopXJ9PMaGwgjRxYjwK7Okdacke4jiEeultg3MBKhY9zRdCEsU\nUKt9Kz7p+Lq8lVx1XPlmlt2rOKkSY1nzsczdGCdP5N+TOkTRRjaK7fcG+kAd\nV4Be1J3UzSGWnisWwYbKXd/gc71YyMaZmK88/J6rHp6q/zJAZr+6rAEGvoxc\njSL+ierf4nYFWVSMCcdWw5aknYi314o3HTAMXnqUWvkzktnzYn3m72thRdkQ\n+AqJyEZlbesPm0Hvga+CWNomG5/GRSKZNjd0Ir+IDMxOMKS5kCHrJk7yg5Q2\nf43tdLtcqAWipoxG2vXBCu+TTmj9Uj9OZ33znt+89r21daM/dzuM892YESni\novQK6uUO28KwoIlmy//IpS1WP8ZNMNpO3D+ZLhcE9KUhPHTT2UtnhI5PkdVW\nNcTqKJjmnZseS7VBYNZpDsXmh2tA4NF5xsFqJm2YnCkYlDfo8iLMtgCm9GmQ\n18Bpu3ZYurxXXsjNXuFZRjb65yzsB0Z3jJrDKFpYvhhKf/qRR1TorQrBYiRW\nbyJ9vQxSdwVH1ns37sE9o/N+P/w+ldhA7xiySjy36DjvvUNfXbj/1/ocLRvd\ngN4TnvQFzfJJAsFUI3/EVg/bXh1MgosNmnKtWIjNZtCVFDmGRvQpImJ7Ay6p\nGTsK\r\n=NXQU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGki5yNWVnmzFcUh0CGdvtLquF8eEmMDYofWjeUy7yWAiAR+9E733KTjJCdowc+9jwB3ll38rWRx4bwqda/y5Y1TA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.99fc0632.0_1628720486048_0.9709617626935154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.3f47ae57.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/snackbar":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.0ad12ed3c.0","@material/rtl":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NH3paWtGuWVZvhPCN6Po+g6svPj1nWeySSXsCgiEKVzQb+XTUyowGphQG77nLyA5b6fkNu+1QHSAs93HPTPmHg==","shasum":"9cb7ee901afaeb85296dedc9c6848be86970ea45","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.3f47ae57.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGVCRA9TVsSAnZWagAA64YQAIMaCranYFJK14NLQJD+\nR/lmu0sVSYXiNCGgi9iI30CWoJyxY3/fJTRFAGwLYB61agsMyrZM8N+5I6Eh\nAQT2+s55j5NMrlzN0CXiXoKTXCZ/Kg6SHz/6FZWp1oeFx2uhLOHdb/aJmsnV\nqHodzIjiNBAtVXy//F5WWNJxAEpNwo3b9eyPkuFbCKENUUsMelbnzRBr01db\nW+FsYIgXLXtgmcCxJYrrr7n6clI1R+M04/dzfguSqoE9qHGbc/GclhBbDZQy\nAQPpNXYfhv++5DwolbcWw5dJGej+YVJVclPrY0PxDY/jwRs6du2LE9mPEWys\nu3A+u0/waCXgsAYjxHzR1C6QWPIfYUXnU0KUT+LFGpFf+Ke+HNhIqsUOoV1G\nJ5h7UJBq5EiD7kzpTzIrIBFUYRrjU7x77h3Km0ihQnOGqTDaXZiYm7wyHgFz\npo4mo6lkSwvZHSEWt9rOypSPb0lI80LPqBvyXgIvu0RUHkMmkwi6mEFGhciX\noKP9icn2CALWxqAPbwEKEhRy5tQyEykIvsEFcP/VKK9UU7yPbHwA46DUycXG\nh3UzSfI3V8+tkKWKeTtlfHstzCVk8eZES7PJr/DEsFVEcL8Jsh4VZhaBw/Tk\nNy57jV1puDxtlY/DCO8XZtknvi8nCBeTKQXU5Vc9TuiFO0F8xMwNJFT+W4jC\nmZp1\r\n=zlJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFax33L52AobubVpaJAXn4oLcAvmeT6GIrDmS4kNTYgwIhAPkofpcq6IWSXTddpw6iiNrOdoI5IuuRUQDlpozbt/yO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.3f47ae57.0_1628791188915_0.42394750775971857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/snackbar":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.077dcfcfe.0","@material/rtl":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KtpyuiSZXqMSfHX8vscEN+kH5wE/BF8R7aFwpAI6oGDXoBsBALKE/lG3hgdYAfsHF1TfT+9epwxo8/WXD1pOpA==","shasum":"ac012031a59c77db010b4112d42564d27033ec0d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.6b9bfc32.0.tgz","fileCount":16,"unpackedSize":63970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWc/CRA9TVsSAnZWagAA1kkP/ioacRcMeH0op3BH//hV\nJZ6bfvt5I2cRuiEk+S5kI+8DhhS2SZyfwU7S7ssdo+dy1R1A0bE6EAdQDuAj\nb3zHDqLsFxBUaifWtb6m5ac1+7tDYzn6b/syXXGO35XX6lCRR7OaAaJl5R8T\n237nPBdflBR+y3Bbj0gQ5s3eGUqvQB9f25VW/2FrnnNw/hX40HF540yEqEbA\n3rBjB4nhvIrpxmXmtfBHRbn4MvX8omyV3NKIGU7LmQaYWcaFDTlSCy1bKL+Q\nPqDqSX7XW5kBJgwMNvIbx/Y8YTf2gj1AwOx/CTviu1/BF5Dx4cYGeqLqUad3\nxXNry/H4a2w8gZ9XpigovFQGa6QYI+TBSnOE+0cpS9QB4dnIgAGnbYvmm9Nj\nDmKtiBOxPuqVZujvo4LlPYqoUMfYPpWb7703WbFltw39Fauw3NdRwBDXvXyU\nvNwz4dMi6Nu3i3Ti6RTwwt7EZeEpW4DhV2Q1ISE28nDMozIzhqE3CuBT9gAk\nwaFLemQOxp+SW58Q9Zrx1k3qwjm3hS1qxwR9PpXxDMTPn/Gr2viyo/nB7RkF\nlsuB2DjrUa9puKSOjcDj0eD9Kzrtpa8COPCak+rwficyhoeZa3CE4Pdpw1ZD\nml6yuziv5F9Cf7c3xlQjiYkI3+SjCjCuvsjnXdAV1c3R/06hoT53beV8Rcfu\n9kcR\r\n=6QjY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkQrWNJCqVeqELCSU+51GBVpL0bflka5/OfvlAeqIXPAIgHlBIGWuYVhVd4pAazVfm0RN7HJFEZkoA3lo8Epv+JTs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.6b9bfc32.0_1628792639208_0.25337595914594013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.c89ecc63.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/snackbar":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.2fb068fb0.0","@material/rtl":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j/B2TExIFBfVVdil340N4+bu6H6kFjcVfUNVMAVjkl6BbDH/+8IqgMxJSDlvaXwm2Eu9xD3uWhjoI8JgciUkhg==","shasum":"6575f0d8a09712f89559fff22e7fc948f5d8d008","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.c89ecc63.0.tgz","fileCount":16,"unpackedSize":63948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp18CRA9TVsSAnZWagAA9VEQAJVK3/XQj29ulFyGD4sn\ni1b8dZDFDgYkrQvanb/2VhT92n972jfemBXuLnZx8SsfMt2Wh+GEPkw6+wWO\nnDCc0tNuTOFwYwnAZ0dmUUxgyCS6EhfRTzNTXUWO/wSbyq5v6Z1L5wgp8jHk\n9aE69krrnt2bwNI/2gPJM72XNM9c7U6mDIPTXB9IUMcjvwbf56tjOBraY+G8\nnUxSk2SVDMInpnIFrUlsfVqYNEav5IErGu4+4gyTjrOzTuOOAtLB7F2B8DtF\n2v8nIm2iAINiJZewN6QTLsHoy3R0WNA0MCFbLVyS6H1XzFCdRu7eSjrpnzBX\ny/wFXZa+nEXrKQbc1HwTkC5JJybJDb7ArIVWU/9UUmhDYes/zuxV4fijQgdv\nhm+9T239F+vz8GaG/FWbC9/RgrDeiPVuVsxZLtEz4czWlEwf47K5Fhw1Nrve\nR21mWKwpjKE9LEmuTAk8HHDTYmDREN+mQKucg66pSbzpF1bGcNrr6eG7c8Hh\nnTcU70v4nMqyrNh9wZHf169BsaIqeQxnP8pv93x6ICtxYpNMiyCSxfkU74Wa\nnAocHdnF9iXCbJinqZgbg7pZ3BA69HywCck5UAc+rZN1sKKVCEOdTElOWZqP\ntDhaScBLs6xgqu8f4RdPii1mhqZ7ricZI35PvlwXseT13hyRWsPIUaEjETxd\nb+3V\r\n=Otk8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1xgr06v0/LNxaMyiT8RbWTMyV69L3BZbQwjyqKoWyggIgU0cbPVqw5Hkxd/l1D3/4Rjj8NzA0eFnZRB9XVPq9LRc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.c89ecc63.0_1629134204518_0.5163656690832552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.59de86bd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/snackbar":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.457d89aad.0","@material/rtl":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-il4JC+UB8Wzx1K9a4GZesuntbYMEUW9qA1LuOJRwQrLVHgv+yCVOWxVh2cJhOtNhTD1hGbnV2q0e9m+53TdGnQ==","shasum":"7b6ca01ae88e1c47c6caf08af0c46c1b8c99612d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.59de86bd.0.tgz","fileCount":16,"unpackedSize":63948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSACRA9TVsSAnZWagAADmAQAJ0G5oBcMSZJ8YulgXNk\nxDdo/QQSQ+g5AqvDTvuGMCZ0oqb1i9Rg+rrugV1qqmTECEZ2YSbch+q82a/v\niR1vVMEwYRIC1yH/ThuSsnOcDb46KMAjOsMSnBtGI+TN2uttOcsw6TocyGrZ\nRCiDmulDM62IC4QcsNkHJ1FlgloCfZi5zUGBUa4bjBEa3mzYf0Nnz6aRqNOH\nH38WvkKS40c5PXS62fM8tE8Z0/4gNA7PP5p3nqB4leGTOPuXpYnKg89mGViW\nwj6QYpwCYDtxb/F5yobpqa9J3xp5xp366aTQdknidF6hSPgh7I8LqT6mKP9i\nrkAZX/hs0+SXW3F50r0m/FswmkQnI6MFsPQTb6rNZ9nuJTeGfShAb+ISRZN6\nqo7CzNC8mfoaMh43KUR/YfH+KAiL6BvXaZj9UezP+ZVjgJWnT2peauI2nsRI\nbNESN68F7uYdWD22nYAbpr6sNUSSvEBPvij/vWJs/kew+qrylL5uyels4t2w\n4eLaowAYvf3JohmVPVvUN/5aQlOdXT8Y96CTvCRUVZKnE2gH5BCKEk3qFPxi\nF1qntt79ExN088JwVjvkIzfgVJ3tXVbV+DD6CgFks8PAq4/qcOBILiqySGWg\nwhZ64jW7MR//V9wAmRtjRphQGikiNa3BevI9ROHv3PrTl73UNw7MAcmqWLf+\nf1T7\r\n=JBlo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGHrW7VQUe3viD8zcB7W8q+AK3Wu39cOFm6gGEEvVU2AiEAyJhCyxmJZq88mZzjfDdyDylXn5LMBFCwQqTKI6z43eQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.59de86bd.0_1629250688232_0.7421169889823998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.dcda879b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/snackbar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JyMCBX0eAW0NwPSd7+a1psAddqyXtLFbmgzbFgVP7FjDP3K6mlThxWNvA9SwrOTVeoFuyTvRLrzMYO3mVsUoxQ==","shasum":"86879ff5807c5e543b95ca2f8fd81045faf8dcc8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.dcda879b.0.tgz","fileCount":16,"unpackedSize":63948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhJCRA9TVsSAnZWagAAsWMQAIDURxD2Y8/gUS9GHdj/\nYMQr4W4JUXbW5d0hviPkiCVvU+QUKZyN+xg84jb6M3Ggja2IpNU+/gU0j01Z\nUEHN3MxtAWaWJQxaXqzm7SwVXxDOViJ74lm4k+C4FiJWG+l8G/PWTE0hoJYw\n6PJAhIn63rz+Jgt7jxl8RMs4pkggLX0QLQ5pu3Hph16c/gWSW1LVit87zxDc\nHGPj2ExxolMXmd9oPlrMBAj5CFuVQHkaUqiEFBs9LMA6SUkiqFmp/ksxiIVR\nzbJ0mTADpJ8OX+IxW1zjpH9K+VnLVTXo7+5OZEaATuGgaQhN60ZhFpm1hUQQ\ngnkbVwX3zSkYU5RbkXXfeNH67eU3AXq8SwclMRuNrbyos3G1GHFrVSjNXegM\nEMx5e1CTlO2AaS7JpPRd94obTofyre/Bjt8LQBm8R2GHCxWLZXvQMOo71jxy\nUbgUSFW3TvQnGIdO7GKGPpDiD30RHxR/bz7Y43W5drJu/rSu0PHs13m15heH\nzlOc4SmZnm8R4K7ujnNUna25fLclLVWfgbXzWMFYK/5MBh3RPaJKVN31LCxx\nvjEK+ga1hrkUR195o492JrfOxEDNPJ39rQMFG09YeUV+ZLTZGuOoHBdr7wkZ\ny3GU9MZCF+U62BX+pQoPv3jxxp6JKW/HV7OcSOatFXpKlerIajufY9mRM97w\nAo6Q\r\n=XMbv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfghhDVPylDMK02fWCIVOlVIT7plTk2IAL+20yzOe+/AiEApAtzU5p9AhkGkZW1j0yqFF5tA9PKGEc3WeygaLtdu5o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.dcda879b.0_1629325384994_0.22794152742551632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.dbb8b366.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/snackbar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+j1TeKMCDwBgVujGosG/EXtttrW3P/vSOVqTTZKIm1pi/sqMwTExDZL2zaAKu/++M8MKffRWE9L5HnaobbMIzQ==","shasum":"5be67a78a0834ebac9c0715a5bdac1eb9418793c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.dbb8b366.0.tgz","fileCount":16,"unpackedSize":63948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuJ4CRA9TVsSAnZWagAAgCcP/i5QJ+ymCaBHqkdNuX8h\nSZLxZlXozHk4O1RqGmnAsboB1VNQyiWTAnZjm9/YlgcPdhMIYsq5HBQOrdyt\nny9O5BqhLH5bD885Umbn13/zhSgMvHIxmIbkaABQlS/nCRrNATMHod9M/Ll9\nOSBnpCj/x1EEC1x5tX66CbzQXAXuqIRae4l4UC5mUqPvS0uocJVsq8X7mXoJ\nVnhjL0COdxhNeh1r7oZQiR/DXfSYNOvg0bKfywxDu+W7SHz1mAxlAKu2BIcC\nAXzM2ekh57rlaZUuYh6W6B2fn8rq2d/eHcjSoX9BSy5K1uZ/VOd9PgpObZFo\nbpdkJhyyZYHtaeZHqjvIrSdbQJY6SY3dS694TTPggFcUT0MbvgGVtNk8wRZk\nKa/MyR5MvYHyXkJ3C5RtCUwTSTCzpBKzgTlT79//s0PMQINrGp1VNQtlO+6+\nK7H4249GLs4y0vDVT796nnp7hkEA+qzEgrDdp0dwANXBeUwZ9TJ3FFJHOaCF\n+syz1IhOjmsFLeaDvTX7E1RQ4/K5kATTPBTqNkFjziZLV3/IbkD5XZKCJN0U\nQ0C5RjBJD4QTAfX+4U88xWW9Q9dBuLJR3IbCC7SLvzB3fywr4vWINsM020MD\n6HVbIVv/OjO0vJDhmVo1K64IXA6Gq4jwfBdMusMRcRmEMdqc9nOGlI0lhZyq\nH6Iw\r\n=wjxb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+aQH6BYGchIqE2pIxufTWrLCJ19h4CVkk4Byu6t0zGAIgZtyeqw/5yuuM0KyNgMmINle0m7wpMlhai6UtF5eRqB8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.dbb8b366.0_1629414008753_0.06765137040302993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.c6e3060c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/snackbar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KSA9zXlxCJ003fkd3M7KjvkU/iIHsMIidMtBJLITHOLSOGSICK80R3htSjFb5ZM6o9mm3wa3eRYRCUkpRZelHg==","shasum":"1b5c82c7285cc69f33294e62f5127789ff0ad1f0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.c6e3060c.0.tgz","fileCount":16,"unpackedSize":63948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuLoCRA9TVsSAnZWagAAlsEP/AgfBss76pwC5JovnWO0\nciImeHLdHn8QWa/PmJmO2QUaK1cW6FaBqyDLY37o2lXCSQOsYR+JK3LuKRkm\nWwM7CcW2/2vPhkptZsHjV1khhglWGlieefhk7/MuTieWhE0xVppk1rdTS9+u\nhib65zB+EZ0a4CapQOdbVOYdpI6T++JNjLN35gVbxkPMUtRPBYwvIHPHmLN9\nr+19REPjckqdpuQmM+D/uVETZ2xS1d1D/wnxdJlvDg6smB0UZQYnwTsnZKSJ\nqMgEtck6/Alu8KFxTCSh3dHz4qrNUCWns1Sok2AWqxsxGtcDA42/FcvXaQOd\n5h4Mh4TgmIwwtTPRkdEVcCHrXQ/WWsv+dbwQepl2qX2AX+4aQlJvH1IF/Auy\nzPsCUmABQV5dipvSTvQE0PEXWuUYqKzw7aAeLsTKaAcYtf87uYmi9JWxWCmb\nHILWOuWuNNFwg6MzUiFpqbT3bpa2lF8NWvJJlK7WKYYVzAWqZtOAw0B34Xmh\neO9txJH1veR2093AlJlhkHBrayNCF/B8G6ONefghDB5cWw1LAlBpLptghXIM\nDiGM2T+aLx7EkAoY7yVfmuOlICN7IK+/J6Gm4hTrHOL8ohLa3x9/sCfdLm3W\nvWPwmz0U737D1j/rH9vLcO2vIRSCgBXbz+lsKis0poD/lHOP7XYfFLiq7FNw\nWzjX\r\n=VdIC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZL26slVpACzI2otAXXDsx3wR04FxTTJ6VdbFGbw8g5QIhALBdpdnFs9aLgUzMVLopuFn8yZXRU2TStuWs/g5FWF3k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.c6e3060c.0_1629414120472_0.38239284836921517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.03120b7d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/snackbar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sYtu499NcuPCFA+xrDRAjhBQM6WQBMicGYbubBSIp/kz/HMWtPsO4i5ul/RrZYikCLWWfCooGHUyLzPqKquOPg==","shasum":"ec278eab619d5acd39919135f9d5d1ca095275e1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.03120b7d.0.tgz","fileCount":16,"unpackedSize":63948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbZCRA9TVsSAnZWagAAOsMP/RvwGlfvopy/GHVi034j\n/ZA1I0IrjkP80954YWH2c1nqsE6D1q1lRKU9L90luy9VHu50wOR1Ihu/FU07\nPOkuJDkIaspEdKHK0L9lEn4k5ZLxO8INt4L0rI0V/C37Im/C94VwgJFMkOU+\nu8UxvOad85CJWL5oadcM+E7Muy7spJsqfL3ajURUS+BArwPd/Al5QWf5VRBx\niXDqFyQDQilFXzxdMRV/KsZI2Wq8Vgrfn23C0sy0F5+oKeOQFdsikAPNmKSs\nmAXxLlH0raaSPXE+APtHrhoawx6I3euxWAcp8Bsy7TeGOCZtz/R9hrMDIJHO\nT7Ljk95N8qJpRAvrHkHxTmnATlWB98/3+ZaNHig/nuwx3ObJn6jXVwB4uyfC\nzGQHzfcy+GExNdfFvcKQJlS1kr/Cu0s7PEtW8PyedW4b1AFx+pV3KxT1BGM6\nf9vXYydmj7EMpihMf+da/QTJnbzVWojba9PE1QSWe/s3FwY8l53FGUDS2p6o\ndshKV4eXe4XnC3v4X8S6KDyuqvRJfwoMAOyEEU7Oe0/Hj80C2kw278FleYxk\n5QBriBaT+QdBmWZ7EevONps0zB9rwTN6N0FzoVS+605LOhkgHlyU/c20DLGr\nDrQEwgAOKn3Vs4yULbCSYwJz088p5TBmfixD7xfOn9A9h3fosptqrNKaT5Jj\nCns/\r\n=j5eo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALbqPAr17CJXSMHkIgYlIE7p8Brjeta6xMkMBI6XEHWAiEA1MYkBIBtgNPxkS7SfJD2gq9CgQRQi/ozsnFCuNHr5Xg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.03120b7d.0_1629419225161_0.7119969718731205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.d75a5f74.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/snackbar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-81x6MRjZ7okd73YQMvWgslpaICkqbD23FUlOBYUtQ2VMp14N35b/L2f3pmyVaU12N67caK4KlUCWQn6aZKcN3w==","shasum":"d0efc64f1a399a46984e5ab87782b1ba1decd359","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.d75a5f74.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AVCRA9TVsSAnZWagAAXzoQAJfqfnitYczV8sqGAYzB\n1KleUsubOqMd7qv6CUIy5tDsFx6x6qBCAC/QN0Y5WQkOOz+/+96PtzY0AwDa\na+Z3VL2Jqpbwl2ETJ93rYxRLg+8Zd/NitcdTHUXYd3B0bJKUCcqWy12UjT7n\njEzEt3Q29lc55TCjJ7nMIijqk+PeHIN95fqzv5Hpp2FqSdP0dG1RfsRKfC5r\n+VLqW1uwHfxPC4iMyifqe7Me1BfarkEexkRQjgt5jVJ0nfA4xmJz07koq9xL\nsEYkONUpcRAhxJG+9Vzr2BCRJE/m1XvQyaet6lqKC6zBbJ2vvSDWMpQDREV3\n2CRj0T+IIzuk34a2q6WLMlELxinGCcOqy9G9k7JnjllQZQe9rdN141LYbTep\nx0Sef3LYAw0aQq0oWkelAaZLsqZgHHEzdel1nKR0Ptml8nIZWUsxjuXzAQV+\nM0cbtyzbCQg1jNUENLgv9MWy8EoByr4erAeaYzYDhhBViEWroivoEw45djKG\nVVVNWxSFGp9mD9lp1rCQchGuit7ydTRN/r0K3oT1MXunBdgoa/xKFvA0VPdw\nIrbxKvuqsro64nrGmuXbbKo5uU7BAWx2IAvgAiTMHjSPtu+If/3UfoP7EV/M\nvVG/3Pzq0BLpNUxA/T/vK8b9jvGEoto8zgEx7TeSQGxL+/8K99F8esIdFAAv\nZO7h\r\n=NPNh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs6L8tEHOP3POvFIPqNqwFigkGz6pQDIhzRwp2v5nFOAIgRaoTXUmgDCU5eZp6x5CCeY1Qd9D3Dm0sbQw/5D8NMPI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.d75a5f74.0_1629446165407_0.8699740469275399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/snackbar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fDw4sEAyvIEWTauBZJXVtGK2fxqV5quvK8GR9v6YXXwIBsGtRlSjGanjoESEJg8OyySXVNEQZmPV+z5KdhY2Xg==","shasum":"9344ac1fa9e3b77316ad4861afd1da9826a45447","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.3d79ffe7.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SLCRA9TVsSAnZWagAArOQP/RO4GeOonhI01TXVvLRA\nE3/a1qHZ3dQ7Sqx7OLB3R1gLwxCtLK0DbgAVU8iNgJFXAX/4IwjxMx9Zo3xt\n27tSlZqY1kn1HRlJddKjzWKLgTnM471WnW1J6lzRxI4yoiPwQr/MmSnG7mdY\naKXEhUP/x/4s5ysFKiFcR9LFAQMO6Y1Cxm9NiN16GvV1HoX6+Fv0m2iFOFwA\n2I3mrvqH5LhfBPNWqiq5zu3CC/cL8Ty1Kh6TTYONVfWiRhVNStB+cCL+WUAM\nmZPjiVndoAMXUWFqObRL/hs6CamM5j/iZlVuifvEcwvXBAnVOYU3F3b2ehY7\nwqrMZciF/iUmNQzdUQKBwdczIdmBRYKe/C1RsV4TjV4blrR6vQL4vgVzp9Fz\nD3tzFRWi2Ed1dZgFLHORxM6ghhPJ5toOIx3XHbgevdHp801tAt/OTOE3oF0O\n6lT3+SP5NSUhJNzxSYRmZ9OIHtzfkM0RM7WzYNtMozmc3qkouQEwUVkYU2be\n05Zzk4c8K9cpMEPFZrf8lJRoLkuMX5ABBZttHsf4OP2KdW+hQ4OeZhddZ5Ew\neH134axj7j/LhfP9+uboVDGtNd20Ta3E6ayjRS7cPIceI/wqYWv0ihM/ausr\nb1i+A6bqYMLAT1uaedakc8Kbd2DfeJmOHNsOVbV1Jt9gvCIM836d+Fdu/Jr8\nlHtC\r\n=dXLk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQZNtaTbLvIMPRiUm+L1zAYBsW1qXzA1RA6PAh9fisWAiEAgiYsR4T/4ZLQ/zNC6M/hgfeRe9SyNEi6T75kfUJR0Og="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.3d79ffe7.0_1629480075269_0.5259863329030412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.02213ebe.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/snackbar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VGoOSfVWObXcFMnqDPXQlFr1QrKlMJ7nvL/NC7l0o6jWxSShpHLfFsRk+2OoSFPYXo0+RnABUBLKjBZRFTS4dA==","shasum":"69b5c8ac80955a70f102a592c5fd61325fd076c7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.02213ebe.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+WlCRA9TVsSAnZWagAAuEoP/2f92nbhVp7osiqwhmd2\n/wa4wH4fS0+fkiDQm5M7qg/QCZOoLCYd3jdAm7CmBWBAqNLKXV0ncNbzdhCD\n2N1Y059oGgusbLtnZGwO5pX08S+fkAC90eofaaIWcbQtc+hQ759QwERNyakI\nTnENhXUERZoCXhtBlIS3RtNNtBQgYgWFdAHfvoXxUCN+5xTyv3yeWZJDLgk0\nZe9dgHVXYbo6s9ln5AOeu1OALZ89eofD3X6kI4Stiozd0SbfDzrIhO6VIXpV\n9Qss2gNZUDivGaNFfU0FxTGv8183UDSa75umbZSqxjatabHuk6LxAxGihZrP\nbwUHVKx8eYi1UJEyYYHa9Frh1kQI3WWYsB1Y5ouO1EsNih4LCMdCtpNhfJxe\nRo/3iIlFWvRLJrKcaW3Fyt5m03DCIZq5bPefDStqphUVQW+hv+RK0QddhqF2\nNfS8TYavFn1CIg592AIt2uqoZt3uoaoqiBoV/Ach2P4jSEDMhu+iMItYSbPu\ngInauEoxbzxg6DkuMUkccievu19C4AMRKkd8rA+eGOIFNaPMZt4GP4oU9/kx\nrYkRiom9qdBZUnj5Cv123r9EeebJQ5nWlM6mRZRgau4EmPde9xoyb2xDugSL\nB/PQUokFDynn+bH/qmbqky7NuZRwkEkS2JXOu/7ZkKupWV8iWvrXeYaXe/u5\nSTA5\r\n=ng0B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn/GE+ZT8hQhOuYUPDnsKABk5AZOstBwXr8wF32WerhQIhAJTTDX3/RTvDODZZnap9JnsbxMlkSnzFXuEXmsTst7MY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.02213ebe.0_1629480357163_0.3525743699709385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.90a999b9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/snackbar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nsKq6PmCJF7R4JbqEUFOfaWOC7qX0Dfv8uNbC4lxefs9Yq3UnPDCaIcRhWk9kkpdxpYcKdR3o3b/ojuN2MqEdw==","shasum":"1c7d941acfa508a146f3dd53005082f1cf74b5c8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.90a999b9.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/eSCRA9TVsSAnZWagAA+BgP/0p1DBLDdvvYlCVvAPkV\nyJ9TkksfZq/lhbmv9+diewKbovuNyup16nrgFCuYdRsuhVQxJpJKtuEZIDvv\n6GUrY/V0sLMT3OWVRQprHwSjNqi67lJh5qEAzXWDUR9jVKYPTqGqtxFQx5Kb\nOKw7BQ7/XiZi0XHVsKNtDBeGD98bF98Eq7ut2PrTHXuQ6KWPT+i8ffu3aqmx\nJLeu/8Pj4EmdCYQ2MrHEsxWNQ/oHnaoFeqdLZK7iVevJSPH6nWGYSPeKFSI+\ncZpRUxsx3JOpSY4Afc6PIf0DrQ5j7+gunDtc/S4L4Z1X7ChMlcv1J3NydUXr\ndibmekbshTMrwa2p3REtnJvdE0ZiB5p7Hj+8sT/0YoX1kQRFozlR6ifDHJWk\nNeiRtzUuM3M/sfdC3QvhkkJUPIGs802qQmil2t6kRD84O4vC8KK7JOBMbrsr\n9dzoWFosLi6iKwFwtRCD66pz30K18hF/sBQYyXUJcYHgE0LDKd5zLyXC+5cW\ng1nFeSXkoSdn9oCO1IDLTJ/I/BLJweKFoH+uMWUAh1qf4BEOIaSD/5B+Qd7a\nEjnssxWgUL29Ttl3jLsPmKfd4q1WHXLLwIIcdHkWt5QeUNzEm1GIpxiR1Ygb\nGxPTsQRRj4s1f3yYSlp7cK4WComjxz1hzgRfPIRzcnUfdXAGrHwsZDkjpT21\nfsDY\r\n=kvE+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWQzGiSBa1+ER2XVa0FTooCvTXHSyRTd0dDFnPbKZAXAiEAhcBQlYBflKa01Vbv7m+yYgeWHywVffMo0J6RxqcD1AM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.90a999b9.0_1629484946188_0.9409082661162118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.6db58716.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/snackbar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8g+39h9ZW2Tg3sdqeAu64OAyLJufm6/LxA+ZVz4MQAF+VmfsTQTq82bPwEDNXrI/gwMIMYfahv/ge2iBuTRigQ==","shasum":"a22db1b7c7742685eb9dd36f118afbb9fb82b9b0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.6db58716.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VcCRA9TVsSAnZWagAAIZMP/3y8yCIiLQBchf7Zf++G\nKyEJgnNaE442rug5YJvTkDvgBxpvnAN4sSjwHh7waX9kh3G2nHpZbhWse3xV\nu2L2XTWFbsn6z/HvsJlmPRXQ8nsNc2WbocLWBvq2E8Sx3UhCqOztJNt70nOk\nDLfNElQw1rwC+bo9IaaCPRlzHgubraeERBnqaxAC9XWSM2uh4LmUbbZCUGpH\nYwWVgqmXQpDA9AtDyllNYCHN8IVNRs8312D3tUwTPahpcOeV68VLC+zf1p9k\nQqRF6jWgDTqNsFtxEv0z1gamIpeqLSF8NTbp3JwmRsBXVgZ4TIDtMh1mcB5T\ngMxpJ8S/P1aDjTiy6NP0fwYZC808k0h0uqXHnPf5AdP4gcX9YkkvoRcnzmPt\nGFOpDQ34Ch/cIw5OX6I4f/qrc036h3fMrWOeQSnlkrgv7y3q1RPuoRDEyAIt\nbZU9jiEAZeE7vaumtvLoMVfPAV2c/69LloB/H5VoV0PcmemYWdImqESp7J/5\nQoAO0i5Ldzq/IyW+JLkY3XXGiIahgbKf5fytenGUxmGtAy9Ijh+1WcpGrSJq\ndm4qJjFHc7/bMVH3NOqALsFTcWm3lCJTbHZHBWLHEKFDeCmozVDwNVXZzLQQ\njA5EyPaqlxqTz4rQ+0WBvnkSlEq9slVVCHHR+cHrOfVznX64eXBt6PPsIC9X\n2R3B\r\n=O/ME\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFMFEkF9Wq38XEBZdUkZAw3igIB5eD6KhfBY5NA1nC01AiB79CPT/HjIgLmLtPYsNcw2OUZfoTejWDGZGemAWPe3yA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.6db58716.0_1629709660490_0.055418038503529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/snackbar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QiBt71QdNXqJT7/6BKU+CryW9qsp64mIb33bpMu6ZzV2dRu1pZ5098gb0Bo/s3WsGVx8pNu79WxoEP62mkXIew==","shasum":"2cc17c99d43594cccec5141305d0d9b3927a8425","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.9fb5bc35.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYXCRA9TVsSAnZWagAA9cwQAKMfRzgdWHu9tvOCeYJz\n93WF3XaJvkKAkGc0ZkH2wdlsq7I4xsIMijw0WAKbhAMcQi6H5xyYj9yXLckg\nmqVRyLPAqRur6wO3O/wcjlZGRqqEyctS2SduaeAKdcseWpor44OgbmvTw0Jr\nktzP8iD7kPZZVpPpAIe1v9Vu2ByyeYMgnrA/TqfnYjMORyD3X7IRGyHLuFIp\niEfDQsrK/4OmTwvoH9q+0QElVff3pXjKtxZqr6JbRo4Pje9XKApLAw7qCOTi\nmNuZ5g7/RZGJDmXndcOHp57gyG/tm4LY3l5es3g2i/QOKSUhBIWBFeVBJC2I\nTW8tTsYX7IXcroFF8qfDjFUwbDVCfbzm2metj3JlJj/yUrn0YOrh8rAzKYQv\nzVo3CfETSDl5K8MPGXmsVF3rbV73RVcw4s5AqNn9+s/MuqRqUkNPv9S9PRjk\nXOE/d03LlZFZEtu91STH7473q4lzRPjZY7zGb3NikkCSw4mwqdJSjCE4WsBB\nNW56BSEFSQOK+Wo9GvFCV2Ztuws7onPuk8A8qiEcNfHSMeuD+gLzcbAFCAGB\nVZVp+3fvThQ83awN56d8ok/NNKwVs+woJfwIxiiiGuRlB0UUMQ6Tn07k0Zas\ns/fci74A4J/FqFVAt39THun6fM4OsFn/wNzd3M6cUlfky5BzhPMlMcS17aC4\nchKs\r\n=43nr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFc+gfBpur8ViFzphWABydWC+qst5UsfEQ9UkQpWJG6AiEA/hX60Ip0A8/qYlxywjeD7MRdl/yd47Jk6duUldOdeqg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.9fb5bc35.0_1629758999695_0.18255048872836444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vc8RCJanpoSwSGwGHbinK4PwNzokusEotOvFATkHLvuLSjUl2uVV5pDYhll9BOUEkKbY6mcJLf5e+g1M472y2A==","shasum":"d2e1226a2265436e2f1d5c03bbbd2ead017f32c3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":16,"unpackedSize":63999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9ECRA9TVsSAnZWagAAZjYQAKAVS2HnJky6XtPHNECZ\nsyVllCLXG8UEoE7ljLzWPgSz1aOccU5Z5Yb7o0X8xefZGL+ZJzbOGj4ky4fh\npppa77oLsvVq9G/4KrbXi2ll62lvefl6QX8hO2lAwdo9iDUvA6Ug/U0K9Psv\nLmPoAtx0ezHw3JicUGCvikJHE/0PiSrC6aigFyQrH1bm0+glNfJeTiwWf4/o\nbr9Zgn+3mRO9hzbSKXpRDlA4e07XZti4vargz+3VTK/PvW0pIYh41/wTEKDB\nbysLD0k10wKq2lIAHXdcwyOhmwCEtxDLyrCSiwwQ9zTyJExF07Sozktoqz2X\nqqyEpAVEgSZ5hatbAhGvpWP3PdBvgoL5ST16TW9a3yE1NM1eL1BwSnnGZA7p\nXJYCSX3TO1NpqcvIxYbmgigyoPti7dEAtCDGzBEpydLaOd6V2toMwXSH/gKf\nKl1TsIYnEx4K0up7r3q2icy5//Ebaef7Y7YpAaXiqVTeRNkx6l+jXueW/k/c\nszqYHjnr05RRy4TtsOG6dEMs4IgQHk447/e48FtHhCpxor6+Ph7t0DB1nDy/\noW0eCey7u+Pla1j3FBDM8U6gyaaAinzjs9DUeABsnk289u2va3uhcozR0IB4\nCT+LZwLI0qLQSS4nWNvWWKzyf3X+giXUy3WujUZKvRpi9NnP2aFGoPCdeKiJ\nwVFm\r\n=QMCL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9C07QtfLI0Ww2Z53nGSTWPNd0k3RgN3gU4RQ0jXZVmAiBLA4Kk3SHKRfkosm/58mJUmVrQp1ProdJo+G3pkmf6XQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.ddaa5d8e.0_1629830980342_0.9019342608860188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.756208fb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+6D4Q2nNvjCjdmhberGyJzlnNp6QFZU+TOO56az0l9gcpwUx1lvQrFAxmuuipDYs7h3/ZCfm9jFMJdOQt+G6Lg==","shasum":"af9512a5cef163a09b23ab019a3d617d53807d8a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.756208fb.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp7/CRA9TVsSAnZWagAAHc8QAI5PBOwclpnmsyOwScC1\n7ar613lVrYhD9x8/u4XHsYBSRp8s5tLLuDUQicAnj0d8ASmghqNAoWrjgNqX\nb/10MZjV1PbhsdeeRHMQ8CKBpKhAKCCk5xFvJdqEc5IgI8dGWH751grZJg8S\nW8espraq05PT1KMYiH5X0lKgXbFCfuOjdiU4WvaEXnsL0Q4xpc7iI7Tu+iN2\npc/nAj23ue7/xFUVmMIC379y7u/BSVlMxLTdM8xbKW6gScfXkQf1to1vABH9\nU7N5mvK8nourccvyHoehvIQYgKyxyLeil7VSAybAtgMNokCS90z7oX1MNtlE\niMa8NokKZeLx14O2wF6JOZQpiKq2WyoLDrwhV9sCtFqhXeYaQfQ/bT5OLt8f\nLB4eeDXORsloaxVOAZgwbGTw0lfaUVFhBt3hJd9gAnGfOZRSSMQy0qBywRLT\ncuXdyTk3CFW6wblXwr80lLdElgpBGeF6oFQIA9+c6366FzgBd4B61zyT32GI\nzcirbSNtqm5kYqt1XmB52UKiZWJ5N3TU05OasM1mojkV0ttnF7RBBURSDjio\nt+Vn1LUgnsOlpZD5UOb/kB/ahC4o6pnoHGGIvZXQ2pOsLrJdwjdjneEXFf4R\nT74ljlN/KQ0WUO7HxVPLvw9GKquzeoLhCN2D49cF9HhrjbyQ/DxDKtsgBWJT\nxAX+\r\n=LLxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnugD7w7ilLIYE6S7WvyUyR9au2nI+pPymeoGNWKnrQAiEAmg+EImQf7LcK2SW9IBzb9NX+LXaJf+uBf0HXIEfL5Sc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.756208fb.0_1629921023755_0.9548856734997002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.9576dcd9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YA5jBF01aeN5Rxrq8orTw+VxQ69jdKlFuEY0L0irOMnz13QKPUI5Wmdegdsd2IlHzXIWlPoQ4FpoP+b6A+YegA==","shasum":"cf2d551bf8e2696fe619759e475d18af3c69c7f9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.9576dcd9.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmTCRA9TVsSAnZWagAAkf0P/27V9fTh3TjKm+pA7mTV\n6nPQZLqBtYqEjIbBnq8YezSZVbxi6t85XI1XbvQQsfSvuROlfKrEWLrzleWs\nA87j8DMBjYhhYuZdf1mtB5kmVs5ZiprDhpvF/+Hs1DR3ZZJdGkS2epEJEM1D\ngNSQIl/l88Sf9HDlNQjrSYADowODXTOgL/ZDu2bt+SsrtIC1A2APl47EOEtW\n2QG/F6HhFDQjju4AwxUpyH4H6Us67AYeRPY66BHc6DpvzEiWMvt9YmFavy0f\ndixsu4W5gmhvGCGG8NtmJFCDCfakG4yLn38/O3ZoFBYcrvkmB0ClNlybcewq\nIL6SbAugEz8k69ivCUy18IUcd4oUSH8KtbtulOZhSsHcCg/QW9rSFvRzYez9\nWt9HdS2u0XaCVluqfIZjK1Fc1k75yH/f347vTB6Udsp4siEuPyMytvJVzklt\n7yQsRougQZNKquLl3gRZSuv2t6qVgzSkn5jmchkK053UWbYu/RoOfG4KyrEZ\nYfnhOMWSzZyzFHN0kEQLsc/8YIsJ8cCurcYrCDasmQ87mItiP9PbWR2HCO40\nKcVVxduovxk6i+OxWOJdS4oq940betFs4X6s2J33zXoKkdsYxyTCbBILY1R/\nFAVSqqGuOBgBiyxGHZNDRTaVSAinJd4+F9p0LiG5dcPRblVsN5vJYGItfgjX\nChUp\r\n=P22X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+qk1BrTVZG9hGHFMNVvz0cAvXpPKDPCNFwYJPrzDyrAiB9oUNO8igHtP2rhiUoHfZhnR1hiILENyYWypyx75R3Tw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.9576dcd9.0_1629927827016_0.03176964022551676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.7531cf97.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zbHcqEiI6fwmYxnK+8syUfBHWkBfKJEpuf1c8n2QCg4PdpYJ7T+pM6BiygEa3JSGP9P5eatmOUcagvUkSnFJ2w==","shasum":"0f33529a524347d06e266f72cf8055962c8a4149","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.7531cf97.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ86nCRA9TVsSAnZWagAAeTcP/0X7ZHNHbwjLAcWXQhpT\nDfUd9lJZzYOjVD0mK+0+bHBmv02oyShI0HnVDxnMl2h0IhZ8H46NQyRQhUqA\n2WVsB97qQ0WHiadO2BHo2zLsDssATKcC70YKB7n2ktgLf5DzWeepNVPM3jaD\n+YgvRK4+3/r4T3zk2G7aZvBs+SQIKqVeIS7BFl4k0CMfb0NoEatDv6UiTYj5\n06MaL/J8Ohbqi4XFnpFIgkHD7vvaMShNKH1wKkH/5+/1uAWcp+3CaghzZw0z\n+x8SRabHwgfr6CFko1Y+gOFTWyIhgAsdZYmI/N5BfoeZA48delIh4wCOxf6H\nfVAUkKXK9uqsE67jcGEjveWX9osT+4NiMohhlh2LhOx3MHbzWvdP3qRVJr8d\n15KObkM3VQkGaX2zzXWjBS7gqJ1lfONPfoqaUkSUlp6IwllXe9JCtCQX6Wa+\nhbZwKK75zquczTWLBxrqUQI1vD13aseL4KnU5rsNjy9vcnUG1OYRrY4Uq2zu\nimrjLJ7YyIoh6oCeij7tPOsqmXMmQg+cYyU/NeCRCLaVOnqiq3cCLMUU0ciW\nnPQHb5RNP4GU6NT8w+lPN/SPHGKqMwcHZmnnwu7gBD3LoGftJD0RWo3xVNIV\nGv/EHToxSbDVbQRtf+7EIPNkbCqrSWmr26TYzZScpc2tsmN4axdrqYO8fzRg\n2Ke2\r\n=h1Gw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE0Y3PmHXjxD/NxTfg34t9q2XwNV11sps4YU+rhCf8sQAiEAsGAHZC3cl9IMlYUfBlERPtNKuCAxiSllywAY5I7XgPc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.7531cf97.0_1629998759448_0.09715270218604588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.3bab26b4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xHYnmE53mG9OInlqBh+OSTIHn9lpWhXyN4/jhI2IMPs563cC+C7BG6oxTUP4l4GjrbBvEz98mcv3gQhiz2FUoQ==","shasum":"a38662c1faf401676b3a32ead85c6091deeb2890","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.3bab26b4.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtICRA9TVsSAnZWagAA0AIQAIy4HANzD0v4BVSclj7W\n9gjchw6xEP6sbEypn62LUvzKSZrvuquyvDzuGKFkGv2/vzzRVLqNkl0/PG3q\nQabGUkeTf66mV3wnHprDYe0deISt+lNXaLW67rDPnPqEeO6UqjY7O7nge5eD\n4TJDqYKQi8gH5FFOxFqfhNnQUqKgFY+PGCVovaHfOE9s128JVPoZdWLABp6N\nXSN7g9FDB6A+ekc4ROd8oh2bcMVDPD9O2Oz2DJv5qMEssPfjKIqUygJ5g6mc\necRXeRnqewRD9k2dx/+I2VWD8cJtLZhEtNNfnJilNMjiLNTF0Y0i0cq58bhC\nYkQdUR1ntTEzvyfYDVLFZIH4rRY9otLCqhv9RIsa+Y63g6uFQJTYLign3TcS\np234mbiGH3Mb95LSth672u7Ok7DeeBFHM0IsDcob6s1CvuogIqeGgG8BGwMK\nw3MXiHLLOrGupQmTXmmtXq+9bpcIaN7+i3rt1ct95TbHFUykLMjvqFlLRGC7\nzqFU2LFBD8MwfUjxKBXmPMZwXpNN/rTEHjDnUOCzu7kuwMEp/BgIeBnyF6A5\naqDwYcEj/Fi3VUQe7giOy6TeAk+9+5U/Yfgopogf0TI4lPzcrIuVAux/hgLw\nMxKrzAdXtbqX2X3jBQnaFkNqOf58hIGYZMwPlavh37W3y2bb4nrfycM2NIrj\nws5F\r\n=w3Zj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICq3fePaDCCsOqtpJCkpcYfkhyENNfV+Rg4DJpL+h+w9AiAZ950cTeH6NFVMa3Y+W20Qxal2juYTRM+AE4O5uBY+bA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.3bab26b4.0_1630014279826_0.4058040357628774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.fab48bee.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iQZWkRBWom+UYHRxL/i0pjBr7h4sqVXJgvXowgh5KdLS0vuhnpm1MxIj2LTFQVDoFQwvgj1CbciGfD9Y/k1zaw==","shasum":"e5c1d421fae6eb8abda648f70906962f983cf7d3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.fab48bee.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCjCRA9TVsSAnZWagAAFAwP/RCKmtf9BoVPKzluQraA\npZudaxZN/oLlGNS2y7kcWus5NutgaKLNCs4PAHUC5DkPAZzpLxb30yPahdur\npiPj8k61qRMEiIaFjyqaJuzth+w3rxF1c/QIxJDUpI95jftQBQoNS8vsiR4v\nbiTDom8FkKL2jW2pn4ikbDy7BZhw9QR/i9HcutZDBYDg+tmrGZfiY0rwce9X\n9NEH+412/HahFoEm2oQbOfhlOuygiZOSp7T68nhDF4FHtBYjfjSqEuwlsXdJ\nLdk3mcATVjUAAjaZiSi/gT648NaUyl+ZWK4jINo0Q5H7QNkrhYb5Bi3s/Ljr\n1KgMWF3v6YYTdyPjlAoI24+HaIW6ejznFApsAPvyT27iXUn6nQ+Kn+kaMwvo\nd4rAODTUGS5wAnNQwYkXCtE3lWSbfMgGQdJHDDhaF1jsdykk/YOMLl6Ub+j6\n1il/6D4tD2w+BIsCWU4hO6ReQm6wpsgfqRXBkihIw4zVVaO1BC1dxM3TKJ9h\nv+RkQYTthnUguNGPB9gl10VC+eBQ83nQ+D+CNCfX0kdtxP99K65idFfSSh3G\nZwAdlTXFjVk9oWTvdRJF0gB/FFshpGJYZUf5C1UtH5MRG8DW/OTmZPiTedlD\nWvXSVhiT9sR0mmEjF0t50MjotvV0KeerCSRC5NYRuRFzsff5K9agpas3HM3i\nT/QS\r\n=Ts4c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhXPX8fCsYCzDZBhBDgAg0aixcP1HPLF3BSmbaXuGCbAIhALAZHgky92iU6frk3R+0JNg5xvmTk1MjgQgROE/U3PZO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.fab48bee.0_1630015650976_0.00005449201933149794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.dec18df7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QgSfK8EGkzJorAC2qhz3hs+/nNTbUb5nQgjP6JHWtBduel/STdvzQWsh/Apw5++5+13JXRzObOy8If0BglvfHQ==","shasum":"3547992078b6263865fe7a9ae4d4e4da742044b0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.dec18df7.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJa4CRA9TVsSAnZWagAAWlkP/2ZYHoBtHj2TmU/pdz5u\nNnzHB4mo23vCoHLeMa4ZZEzfDTRuN/yVFTEtFLqVxsVfm2C9NzlA1Kiv5VUf\nteVvxh3EFknZflWQpncRzbHeoZ23HN5/LFhp3BTQak3X1+yKyShVa/uL5r5E\naizz7a9EpL99y9hQRQpHxV8I98zmE1mj4t6QCr3LqCmy2lt4BycRKBkpZsFT\nknnV2umrROPk5TKdu/iO8qRB4eyd+/zl6iB2aD3rz5KpnMvUiGUUh8r1xjPw\nyF1RylN6/VzDDEI+ItERnpQ7LDAmP4KUZKOaumKpFuIAisdJ+chuYoLjMlf0\nqV8RBtPCVo+Po+ZmNOJ0ujaW05mhDxdj4/Sf63Gf+cug94D0m6VaK1WWmP6i\nnoM8xNFoFNejlUtIJE1OMu0fhRx+FJLRN/j/CqrUJC20llusknfFw9sn6iTw\nmQ4cf1TyrVCu168CJiSQim2hFkw0yxL3776fRdgeyowJoRZSYGxLm6LL+Wjf\ntlUz0tWU19eDZFleQf/6Ql/Aieg9ydjOCbLXCwSd9RH+cn95sZGHEyar3yKm\naFcwQAT3+4YoqwT/Gk5JZlLLYaKfH7oAoWlVhyeZ4iUnd03T3CqBTPoo6jAY\nXTDLcFn0Fmin6asZGd1zxQTOqR95dfXtcO5LNZtV0Lx07xpozoIYzPxQ+6Y4\nVhhh\r\n=+vGj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAvbv1pXjs4Z8majhx0y21+VgnHbhZrRPi2emgFSYvjAiBVOeFYJPKiCtDKIyBCmWXS3WneCa1v/xvmXObLXIpejQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.dec18df7.0_1630312119973_0.5719953090910508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.61fe5b17.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lIeogfMJn0d+SXvsVJZXpI1bpy5TDRVV04Zz/Oi7UAA9FdJR99ZavTcyAdQt67T6SnqDl9uKSB8ZsIacGQc85g==","shasum":"59342c9c557fd095a7a65da1818b39d19e0fae50","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.61fe5b17.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFeCRA9TVsSAnZWagAAYlYP/1i+0A9Me+RlvSnbJer6\niW2w/qZ5oATGeJ/mB0LMnYEjwn5pLRkEEKyaCQWKeV4Zn2Ra4N8iF5xR3rTv\nitzG+yKYK8JsNwtCLz6RzfDZWO2K89rIHYa+0PSmkYN+VrFMJDmczDGZEjqw\n3PsDrmtEpn+/PdK+2QtwMXRiJnv2/1mhXV8ZrzZ33MfgQoPwbKE4pVzC8Rok\nUcdnJ8ZAnjencLMiI4wfYNSWc5LhDa03NFkWxxoZEXz7NgWAiQZgEHVB3adG\nxKDVBToB/rKjgijIJqfrJ6fXdw3/7jnE7rpLof0ymQCRUAooFGK7zlcmWz9u\nco9Uwi7E9C/TMptazo08lWsIv8YiKyWxK54Pu9SS5kC4zkq5pz+TA3nSIKEO\nnJheKF+PCNAJp0Gn4zCud+LgKAtYSwDo0mKNAqyAclxB5mXY7WhGFXWYK18Q\nVYdDx9V8uRyxNcNh3KI/oJaOmC1P5r3n3bOTVRcmO9MD3jswl8oAM6k00Sks\nWb6djH+8TNWYH6xMoZx3ktGT/7iL/PfSu6xiazyl20ZoxLKiZ70Ncft1IjD1\n8eYD6oC15CbHq3VwrogxvfPlgsgS6ilc1Ez2hZ6dJ63JrrT3ap+U0ewaqNVF\ns8duhf0CFesHdeSE4T5q5bB1T0p4Yldp2FXsEr+PamurOyyJorL6xDfkmZ10\nDYsC\r\n=7JDh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWMam27cs5LLuFkuLl4OaZpeQJeofTxrihGAnylGlwEwIgD4ltBUHeuXbwKXWZ6E1GQVysoaVJpfPCJt+u+1f4m9s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.61fe5b17.0_1630351710066_0.06792168652794639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.a8c31f54.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O1ccWVX4aseZ7WDNhMO2GweHnDMdfuST9SWcXXHRfdG4lsYNTq0JeQG5v/JIFy8bbX8AuAlifLUYhVPTcU2dCA==","shasum":"f522377e6eac204acb2a8b5cfaf1849c3d0f36fb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.a8c31f54.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAXCRA9TVsSAnZWagAAE4MP/j5PnEtZZ8cb5X2jfWdB\nDdsioRftoScFqC89kpBEeM6FoV58JENLNd/eQc/4CD+/aX1UeWj0fYdUxHDy\nornW58Q/oWqYtqEdPtRAZ0iFAXxsqU5V6XXKZVMS5yDOZGiGeHlcCEyNnUXA\nRbvg+3JKMy+8F+/0amA3GwlTwb90kmTVCEDvq326QEfZ+5mx8LazaBJZwn5C\ntAoUTUxVE5MTAI2zJSDqCnxuip481OklTWTzXtaI9v72eCR8AUPvrM8B5uv2\nC6WBtDgMeOUixu6B1QWTG2ok4AhK8lMYt/YojPsuQRy/G46BdFTtRB3/qp+m\neulT/HcywcnHzILx/Dzq1xuY/K9Pd2bgUBsSozWah6yk1w/IemCjoZxG4pyA\n9ousnzLPOggazmv3PqeS4RVs2auOMoYrdtLofbKSPKYkYMbawoC7IKqHlyEU\nTcopUcU4/d9KaBzeY4bQamhVkmyNR01LIqLPlXwlN+tvbqp75YL0kK3lqScp\njOupm43iCBjjzD0Cbhn8YVQrNx53d0rvYWdNGidSc0ud5tXnEre0IlT93BsJ\ndYa+YCEKA11JAuCtLiUk2lU1EEMpNXQvg3x+JeAHxoyc4L19S1Mr3nWIqRmY\nokL5vCx+Wv6daWUuy27fh0USBGLDk7Olvvm0a3ZP5kugHR/tmTHBWDFCrXhl\nzzgy\r\n=CKpg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxru5spAt9p1o/LUShqfro4+2D8snWsxwdh/rzMoexhAiBv5CI607XHX4mpaFTB5fgG8FlVUthlY4/IagNC5ZQN8g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.a8c31f54.0_1630355479784_0.05006029353687902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.a096dba8.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VkAVQmYS8MWncHlLfHfmu0Kw0JVrQ8zz+IORGIn+76JTErJj91c9ucjrtknqUto3TFPIimJpm+kL6r4IFoYmcw==","shasum":"3f57966825fb11eca981b2bf446bd9d8adbefff2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.a096dba8.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrDCRA9TVsSAnZWagAAzBEP/38qNj0jfglXZLO4ezP3\n165R/DcgpfyqrJpYh6Wad20kpBi7PftDVJIR33iyaaYoEdSrvPaxG7/tn+iy\nA55sf8N7IkfPCJjjfnCaE7k0EpzwVgTKOZNtecPAGobXY0xoKI/XmX+ELwxr\n+aw2drE5s08DpMbuh+klQvSMhlZnagLf63BmtvSY5/PjCb3ZdUyxuBfFmnN6\n2Pkdd6HHt6kUxXSCfO9GI1pSJhlTzuZg37MxdSyHXA589tHEz1HqhhoCWlKy\nJjyaraIcByxTn2zSTP0Br/VLIv5Fjd2HsK87OlL96NmJTPWUUA+jCnvRVw1i\nPDYo7U5RfMop5x+Rk380PMDdPbVO+koUIuQC5MQ9Tp3Lv/zpfg4I6OaSNtbu\nGnJoiTAmd5uGmmklK0a1lI9v6uMI0gZMtBlz1354t3ZiO2kuGp0r0H+4xyqk\nygBTcBvyNev6roYqMGP2MyYRRdJT62Nas0F8QDxhfJd33EegJETJSjYQrS9x\niVKKOwvpY4zXT6Y82LwkGk/jIfVOXA+0TrEBnryrvvbL1fod1VR/3BYB5f/y\npTz9iJTB1cbrsEYA0xLAqbeNqfUgZMCopzxds2J/nBhw94thrHiTFY5w584K\nVSMKfPZm/SGXcDsb3om7xWkcNy+CL9oGuoEsQGwWVrZucHnxuwEmGeV22gMq\nJIKS\r\n=T3fQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfhQMRGMkCo0FsN6VkXonVvVo5qoPrfQqf8kUaS7EK5AiAFzyK3HZVlVQzSqERs8l6bI9kQwDcyyFhUAhQSWFbpIA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.a096dba8.0_1630448322900_0.5840103390444107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.7ec04d47.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eMmFZkvuZHK6vxNQtg4gbE8tnU+KMtTbbTVgFc8DvYnurxOqlRuauuxoSS1LMm3A+lDyOOWLJU4NTE9gwrkCog==","shasum":"87c77032bbc705820ced1467de4bfc22afe9d068","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.7ec04d47.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1dCRA9TVsSAnZWagAA9EUP/iyy2EeOvCPqhobvnKQK\nz467Lheyn0kQFQFKu3UW9gcJ+NDNwTtphWyk7ZAY4nZ30NfSGJL3tnKe7NH9\nakV9UjN/LbiPfLg7ytuQjE9hw4EnmCj0vYvGUGBADDzaZL80zjV52TFMYr0A\nnuOQ7pafJZAznm96eXArfYPXFNKcZ1g0Bp1Hl2g0Nqib86oJbn5nCT3ACQjq\nWtJ+1RM0Ubw9jXoAUvhTRbyqPX817734LenlwNAma8t4Qv8q493o6BmUNd+W\nY5jJDsVJ4X/1gqgAv3qPZiXBBhI2foAPMbXGBDaFvHvD24z67CrX1r2EIKqY\nVThVI4ZjOu19eX8fHrC6Erw042vPht8r2lJ18FrhXLrSgbYxfQW/yIhs08V5\nkoxtmkpldOhXwaRXYH/gRmJMqCJSjFWBLExfA/i26iO8cJN1vQ5SrtOwVjtt\nHkZxAvXapOQR+rNRTujmRQHL76eIcIQjixgGGiwL0mJgLbGxJUDOSrYHpLg+\nGRPzu/Po31vW4bJYbtYzenu1ZIZn7+c+vbQIa4RMk/03cSkdK6kRXwXApaD9\nJzY+K2Bio74CbZFnW8UMzVHk24ThW7LaH9I+X7KBxZzSmFbz5PIfu0r8DMsN\nza+Dk39DQjKiC/V7eQJ7y0FJ56jFmXTqJrY+QTeIwVIJ6aRidZRkho36K8sw\nA0Tb\r\n=eLIO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGOTLgmLjAS7wNOAlttQH56xO+wixZoQlbkqKXJf815rAiA1MM14HQ+9ucR6QpvhbWG9fCwbK3OvOcPTqPxiqZVB0g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.7ec04d47.0_1630625117034_0.6881089904061057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.d00b098d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HvT5qL/Smy8SwRbLirYzM3gx2SAutUpOEYmadQnh4F11laACsnmWcc50KizLqDXyRb23b/mcqlZ1HP9ifWNA+w==","shasum":"b148554f596bc635e695d3595e3e05d2b4329eb5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.d00b098d.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMGCRA9TVsSAnZWagAAVtsP/AxymBmI16uFp1jIWt+u\nybX4p+nCgCEt72S1Aomckc0jr7x2V6rh4L0hkD/H1ant3V6yM0A6FH7WxqzN\nlnm1pw2i/VLOhkT1MVyIa+/7WcH/2PD/IIwJ5XLNLADQiQXmcF0tlAiA1lbA\nDIHttQEoCmoYF1at8gv/STatULyrQU9hKF1gDbzclFzGNQ+MWYxKo2UCAJbH\ne0SYqUO4mY/To0QLwvzb34KTPnX2VsDz20JY8OB3CAlZjDAaxj9kFoJ0GJkJ\nCJclFag1OLujyHEeKYQgxRrUAesvrlrkQkRW5fVDrHclf9ZHSpI24zifGsN/\nbyn9LSYq5i1YO13KW+WOePicS20nLdKdQf7AS84orEmbZl/lyAgMwHpUYpBv\n0pqeLmmMutJB4Z+89tZG/BvnEA3hW6idqO3PIggUcLr/EBJ7R6VTo+f/QWSx\nfGUwsWclhxKkxjBY4qBe1pyXQXIz0RH4qNl8yA+wm7nGREXcLiKqokAhuDCL\nbCyN/jkQekNQvmZqppkMAwfm8InbUEQLu9MM35tXbxcmKaIYqa6gSNncIopx\nbjGfamhLDewlslX0xven86kAaH51EfbE9y28h009PoEWXGcXhHd+/HAaaRoE\nFIZQTvjjZ4rWM2Ihi/59cYrhZ3ch7O56XWogI9BYJ8x5ffUlZT7VXkG/xDAu\nGTA9\r\n=hxbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAT0mVDGHfGf2zx4iIkadgeWpf0hgtTCPZHXJvtVWSmPAiEA3qFNIXdzelzXWVAaN7BRktQTBh0rf2FbUTnhBBP6AzE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.d00b098d.0_1630704390691_0.24891829566953994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.f29b3352.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J33/97eas2qrJ9ScbfFo4MXYjv7JXLOFmK79++Q4udktqB+mJ6bKZvtpz6BpcBZp+PS7IjML+1PfMFjDk3B60Q==","shasum":"54b1bdc08bc6616e1de23f212d3ba5350b97231a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.f29b3352.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xcCRA9TVsSAnZWagAAWS8P/3AKNW83wq6SWJUIUVl1\n7yqY8TI/+s9MjkRHqlDWQniZhUiKE0iLjFpQgqkI1DD9R/YzrhrPEZFeSzLh\nCPd48Pre0H4afiojQrTDqh+ijBkGw/3ngfJxW0aEATrPdBrH4qbE+ATySsC4\nxVr+MEf/bW8lnWtgl08TXtNE9wrwqiBWgc04TFuSHq7KItsUX/OJLNP1NQGY\nFgaPXiCNinX9w4Q1ssozGAkYLti5XnEvClX7eEpdqbBEgCeexY+niVM26Rvg\nYbuO7ZGiJ4CNSRIkFj9JUAbxUSols7EY3/kOfmQ7X40vPBJiWsZyx74geJ34\nNBX/mZYVwEqYYiP+R4Tjh2WyTFvm/kvanJLhK1Nefg4X2EmzQ5aDseZMttpw\nfphIGziDUCrSs0Pe2dYZXkhe1MFFAqhDxMFjmaIyzUHArY2Kx/nr/8JIDHNY\noGXTfdng6q/gqSEVRSYMTy40w7BnmelUIsr5mtGojrrmHcRH5hM46D77h/uK\nfkGwRoSSCkb9smKhrBrRyLGvvfzjMt0zaIAoEs+VuDrR+Aw4efMh4O2EZg7k\n6Xh0JcbzDjxEHUrMzcT+/OOP0Rqrsmdvx3OZoC2v6EQB1Mxx1VCZksI/3UJA\nineF8eo1KplzwQ5V0l2BL+BpCHK08ZolYI5tuardalmo63cGssAmO17YIsk6\nM7V0\r\n=OLqz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVXjPgitUnrmRWSkDoU4dZzQG7f4IzlNbYP9VCAXYW2AIhALmRDRca0+3oh1eBu7Bp7Wrgaq36xEJQCQyAzhfmpex+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.f29b3352.0_1631038556351_0.6132033461522299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.4962a163.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g8NMX20+6eAjx6QZE0DEzNAkdtm1mlpN6pX0PT9GtzuDX016p/KrOp4gWoyw/0xZIgLKXiX4qkaoumkOrRvniw==","shasum":"2139db821730c1a59d20fa4e7f881e1fb1a4cdaa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.4962a163.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/tmCRA9TVsSAnZWagAAdtkP/iKOEm+mrupDLktW1B09\nC8OM+INdmR/pkz5fTvQbQFsduRjsuB2xezN6vM3OQf9CA7pDFKZDzUfyJUir\nlhgMCqlrkKLyojjcIO+pp9JF8gEayeqr8gY1vaZyg8soyqgmVER/WKtgicDg\nhvJL82ovMJf3VhYJALTIEZ8V2yvmJ+A6pabL4brrX+06b1Yy2+dxk9lmaYvV\nz49UkDyudP6xydT2bTNA0IpdlJFXc8pkPalhcsNtfFEqzUusTuO5yiufDRql\nLbwpfgJvL9cqQ6YoMb8KuBzGF1JP9Yt5pXLknJbWcBn+VytW+DbDspqTJX/C\nrtf5NF86wIzDJMf57GAhlLR5HJwDVRHILKAPaTRqg9cktxtbGeQujsuirA71\nHMisEfosSUkQ/a5iUr+WYIkqhLuCIkQ8/KW+xZNxNtGotQJQS0ILXiq5AE8+\nbiAPOcUeUfY691UoZBNecMWZ7ytJU8eZOy+RzY7skTZtKxBM0isq5gT9Rw22\ntnbx/6ROyDielxHtpUJf3MLUROBPC8S5znFxhHs2K5wSD5cmn4BkCftyuW/L\nHXmeh8nDni5In0Et66EfmWLDXR6aQHdarCud8h91RNb8vLQr4weBApBPifOa\nGUmmVgR/Ga79rtgpZ0dwHlXXYrEZC9VGyvXipmaH5qp9pgEfmPvbMUFfr42w\nBKfT\r\n=nBkd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEf+F+xQWVL00EKjmkMQz8OltKna/yKkePlsOS3bAU9kAiB0nZFGhCnmNKgRqfbiEGVTU/KL/v3jlxgyLzMH9CFz9A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.4962a163.0_1631058790190_0.021495574509668325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.33102bf4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/snackbar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jURVhgrw15CC1+g47hFWbFYKnGf7Tt8RZSn2ovv4r87P6PAsVn+pjfa6ljdiV0UydZrIVggxdjm8flmi/kjEOQ==","shasum":"4bac333d8a147c89acf3c1fdbaa3ed22285c1c80","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.33102bf4.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAfCRA9TVsSAnZWagAArRkP/jxxQwdN99TBf5n2+gkV\nySM+JC4IKEYmHXXpG8HPwmb8ew6Pdx4ynOiICbis0WxMh4ojdsMtYlGgHwCn\nVnCQVyHMtDeUvptOOdWGtmphywWWSjVO7Dar/CEITpPlYD9qE66HAJCx30BL\nhvjaimf56/9gy7YtYpxhPHS63TS/Lx/skbEJ9G9lAO+tqPd3CGe9q+M0QdSs\ng9lw75nwPGkU1lmDawThUcctEDpizv4iH5zFJA2FSH6+FZTyaDKMYIFBnvfC\nzv7bGvERGw4kz21hfJADQG4VrTYwrjblFNanF/smK7rowmd0jDS3ocMrcDK7\n53fe0vAg2cvvjv19NM0WLp7dCFJPhZd4NZO1sIG4nUCR2A7gTIGstG79s8wX\nepRezvoZcsPDJdZpLobz3CUZQLkd4/aj0DzKFrvgErS4pG1Rfph3X9GoMulc\nawxUTJ0BsgGSGBu+SNgsKKDl8SdLP/rBQdwvDPO7FOcylRYOvoQgDcgNE8X7\nnsEAXEIZrm3241LQCYLxtrvvkJeay/7Q4E/wNQZS9e0Pxkj69Zfu4OdrDOfY\nOoSs8DnA6nn4sOxNF9C2CMR7/cw5wbZqIvDZS6Kl9u0oyq8Q2nhVRZiZHYnA\nE7uUvQLUcOMoKj2CBWs5XPU2gG1gCDXiFp1IHUNIfmiVcBbBdzIYGfkzjgLi\n+0b0\r\n=UKXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEH3NHly4gJkvYIvybv/ihJIFrBDgtXLIjTS4/l8TXcXAiEA3CnOIzQIqGMeOnyQjiVWB12V+gKWLGZ4aEDEcDm8yH4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.33102bf4.0_1631059999429_0.9472563148695206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.76c68381.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/snackbar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hanQu5odjDNNczCdgAc/LTGwY7vo55KRmjHXHNQgCgNKz06UrJ46YoFdbWS32chgqq4bc+DYbyWpKBLB4JyA0w==","shasum":"e5c838a12c3fa983688f2641f5f61332d8597061","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.76c68381.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORluCRA9TVsSAnZWagAASowP/jbrogRVcdbeFKxWHZKC\nvToNP4FPovdt9UVYG9Ut2hfYbpTzQi0hdBWMAy+swmQQp+hOzLd5s57oLDam\nrAtuYYh3N/B0sWnCPS4scFFYCWaNWFaDIZEzTpPLzq/yLpl9gLrF+ExIGtLJ\neG0mR36yacIA1kTh0uEB00mu4A3pm7SQdayJgwAS76auE9pL87K7XbpxwDKJ\nAmA017mMf11MzISS8TqSkSXFXvxjRtcQ2Q6VkI6SBsTKUUIYeYgMI4FOlTXB\n8fkluXIBJifU6dK6K5yOHNGOyVSO3GwxgVoI58/w8LzK1fHUJeUtRiwGRTab\n/N6hprlmzu8/FqS8g5JpvRv7u3xRdEFGHpaCYPGhgUB9eUJlcXKFTx7yNwlj\nBrI+FgNGHN1a16Mry/oW3x47ma6lEKluXrSVvOOQbdjGa9waopA0vFJOgdwr\n3B9VVQWzPz0Zhdph5MrFduJ+e3I+9hUJnpswTfgcG8u6dQ7u7K4jDDnAv+br\nUfcMGL9lZBxgxA94zf+JJtcLqBX50mJ58PPoC9ymoDFByy7KbADnx0BrezMr\nq5v77YXYsv8U+qa5ky1JGMc/FhJQOojM7S+3Fm14PWGlLx5h/J9pDsObpbEF\nErBBn/q2E/4jJwoDOgfGVzQbP1K3PFgTFKXTSONqMicXYiLnYnIefBDhQMdv\ndQ20\r\n=XN9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY10SZtWg0bgEP0hRi2zEfutOvfujzIZ0N4wgc5Uq66AIhAKo3IiOKbjTsGTZgV1y5Fdl0ic0VZf5OXoopJSc2m4BB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.76c68381.0_1631132013898_0.26534016308641095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.17d51f76.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/snackbar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Xm2Vtrm8OobhIxZ3qFgukwqv/ytfXm/E42oibB5C8eQ9jklacHED1SBUsBkyEqU2YNSZC1v5iMDAE3iGecPe6w==","shasum":"266625ef743956ed83d5f64acaec447576276d0b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.17d51f76.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaPCRA9TVsSAnZWagAAgXoP/iPfi6AEEHzHI/GpJyZR\nffJIsvMWKEAglX1vhIvUFpo8+1GMvs84Gyat4gyGQ1xaGaL8E2Z9s2JfVxVV\niw5d1tiJy5JTLASldJM91Jn7upeUcsZvfDlWLL/uBrOaKPU31LnQr4PjK5Xj\nyCCQpGuyLzv0aPOsb7a67sluJb+9piKi2xPtapYGz3h64i3ZHY7oF793/z/u\ntUHXW9OIW5iHIiU9t+qLdAeQjRbEfd8oOO8ePf9B8C+vqoaagVtiXHBru9cK\nsIOnGhk7bZUG540qpH2VdOAshaQIh8NAJYf7bCkpZrw9zohotBnUn4vM/3mU\nlE3TJDDqsaSoCimC2dJbXVrJjX+cfIAPY+mob7rwcdTiBTqf37ac0P51SwN2\na6HQ5Nr0IHqAsHS6Szfhadrb8BYjKctvQSjbRCZyEjGD6sPHimTLoRt5P8ii\nDVj88g1j/cSFooLvYGOXdlpG27/9npTDHvMakX8QK5+2vbPEAOGAGTNBIwlb\nNHv6gq4gW3qf4wSWXl+xs0z3+6376E9HBcwop02IguPddehokWAdSa5ePdjj\n0CV8gItFNCuNt0Es4sf4x5LLuzruN4o0KVLdGPXijAwGmlnBuRKVlcwLo82c\nkuwphHh6Pk6EjFOc4yeiCEq2aNOpKtkBJn5yiO0RZNJ0KKCK3gfi/l91kYxU\n/TzD\r\n=gZFZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiEY0Lu5/FAxGug3El69v2h8B3Ojx8tnjUKPgXJDB1wAIgLO66WcYExQw033AxfQHEzJb6EVPhLmUn6fDp/z1DdIQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.17d51f76.0_1631143567706_0.903527194585102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/snackbar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AqSFW6UqMY52jKegKGHcAoJ6vaZLBXE3cpv7aEVDPfK0XImzO/49xI7q239cLA95s9yRFQXtjfSjPk63s+ibKw==","shasum":"1a73427102e5e2d26e075b42e9d0d6880bb3cccf","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.3fae6c2d.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TLCRA9TVsSAnZWagAAzfcP/2TrdPY+fIcSs1cDqs8G\nv0/I2MqaJ/0mGY82mLq2jV0ATuC32WOk8IpfOZB6PqKudnHvwi2oIsDyebWn\n+P+qybVr9pe5H8P6ED1QIScyZOrI4GGHYEBFTo/LAi5LJunn1Hyup9+OI7vX\nLrVMlFnchuYhI8Hh9Id5sJpjLzafkOykVxEeR2Y8GieC1+5OTb6MbGuM+OjM\nGDbvqxcxAymJ9vFrD9oMTTiHTrq41/DhT7GcP7H869pqYuhlCzoBQVvceNrr\n8Fon8BAAT4sduLkQuOrWdAMb+EEW3bOdFb3sUb8qiMrgejADcnUsgADhKsNc\n0DZMoOekN041PSc3NhzkDUIZZ6m+ys77oU0ngPrn4QWryC5yV2WIO2NeMTky\nddCuBJ27IhKtP5gmkPN0iRlAi5I7sOZl5GK512iBMm6N0qkh+0lYEIU+LAt+\nynxZfkkwIIQdV8UYFGuhfR+mgB4g0n15m7CNdkgQQpPQeVHH9gVYYez/qUjv\nEx6Rn/uGzIfjfuQNqGUkdUPgCaB3o+CUK2gEpwMY/gDZE6UZPARI/GbwhqUL\n3QJZkR8uYSaAE1f3Uctg/+VS6omk5zFN0baWUhU4ObQ+TyxHWDpw9G05Y9ye\nlOhUhgeN3Oo3JX3gd1g61k46WGteAmeB4sK2gyc1EEc/yrGx1h10JEtoGMR3\n4Xg0\r\n=LH5p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANFgTBe5YXca4o9IidRN53WNpYZvM+E6f2blzsxKPZNAiB6j06aBzf6bWjwzXlxuLCwA+YF4WmHgNZhW+CmnYQ20Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.3fae6c2d.0_1631298763309_0.3283682914992745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.f1958c4b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/snackbar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QOSg7j6JnWLSRHWnwXFI4cGVw/NTKNs0Obv7LG5N5oNM3RK2Lb9aHxANB97P4x/FkqZg4l0teY9ejCbxkofeNw==","shasum":"2cb8a0b2ddfc3ca60dc320028f8e82112e85170f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.f1958c4b.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6R9CRA9TVsSAnZWagAAuSUQAIxhKn7L4busy9Wl2g2l\n4CxtynuCzMq56fyhCsvhUi2EJI8ihBXnZkPn0NFOyxCnfkGdUEVvxmfvP6Ub\niaQCaUTJqQBhQEN8ToCLbl+g5kHE2TfAxR0L9r0e1ERTp1A7r2W9TRlU7tAv\nJ8LwSvCOpff4asP0vbY+wD4Uj6l3VHc7pmpKabEjHhiKr6J/rmecwy3IQYCU\nQ+vwTKr7EpmrKaQtTxW3DE+hKnCndTuh3xLuayKbnpYkgbOKb6YcXue+zG61\nEM9bvVQCfY2cl390s5MJiHa4noAUxeCRJYMmeyItM2lxXk+aA+13QdLv9ktt\nbnY6+Gpwo/DuRB7uEB0YUaPsXv4PwJWx87cWUJUFUNI5OFmYtE5io9FESsT6\noH6WZ/4I7tT+1IYpZdhgWa9abp1QwEh3pxVxVJVP8Vy+8M+LkfgNlS6eSgm1\n+8q+c40bWKY7ND2NlkINE84yZK68r4g1HfUr6XuQTfYpd7IKZ7wwHPXwsaCF\n5fHl82FhSEMoyEZpRlIDxRdG6MYI9p0ua89B855lNIkaaHGCHbHbLzVRBXwK\nchbeAN9m27EoXkYwKDmVn5qTGxNPoMk/gL0TeBrG2dD3W5TY4zHT7Wlh70hv\nfW9f+SmKPila2WKYOoIVxdoTmXfyFoV7TYd9EvC2zt/fSvFDe/Sw31FbCCtK\nOVs8\r\n=tg4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPeeg0lLVzXs515zJyHm82E8/ZrT0zDfry1aAlJwu8DQIgTjkzteYz88r2yuA3ZyC1yHmQq5Ez+4PIr82f8cMri7M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.f1958c4b.0_1631560829223_0.18952770808548136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-snackbar","version":"0.23.0-canary.78abbd59.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/snackbar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XkAV9fGX9C5pNJK67LY7+0PWLLMQuTYH6mB3dOAnQein85i5lTssGtgjcr7aCDNFkyrsBwWnfHsL4HQxnvFzKg==","shasum":"2a7ce8add12df079f6fa81f3b8ffd24ebf46816d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0-canary.78abbd59.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8HsCRA9TVsSAnZWagAAG5YP/ie/CyA1rJzVFDHHKb4J\nYZBLQ92228w5aPcf0mwGdCjX1aGePyjYPhr32tUMsow7XAfDTdEM41vqazuR\nRae3RoGVWIZv92/QMOuQCGqcksaCZbwJallX5iDeGCIKXRM2r+NxuTsReewB\n5tyXOAZ25Ggq074WQId3OSaOOaoMrtsqqgX8G5v2n7b4X0HmfRdm8YtenvQu\nkEvipwBvm1dsoqwYnCaaRi93jGzdjlePdkJKwu29t2IoU/PKYMl4cVgaCNh9\nnbGJIfUrpqpVVPWNbsOr03VCz7Ufn9QAKLN4cs2ytTuyx8mHhykNFL+mEOox\nR5lpPhNz2lycJ6zphVHzGvTHpm9wDHlK9JFvMIJ26d8kLNvC2VTJtXX5J7vS\npdGuar5RkAW0kZjBuF+oyn+r58qRHSXNUQ9OuSJ8o9Hvy3JBgQET2/iFAlOc\nY8iPHeYQC+4cX4dfYbP9rHePahunaPLDfELWgf3faak4rFRuDNZJbhh7VS0J\nVH8kNz3TJ7SqwZjqke9FD6dGwLT8XVYwTg9j5FR40RAtCeKumcdCuEYn4kHp\nlmMIiGv8Xq5Ioy45jV4RQMokyc1/CM2dVsK3MzSvYNdimCcTEg7Gb6N4U1Dl\noKItDgj7Esj42Wk5usm4Gtg2Tozag4HJxjqmYKwOlGXZJjARkxFjkk8Zox0A\n1Upf\r\n=uBcI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFm0LIZsafJd7vRHjaTqzIQ9+Pql/hvgTQHSNwM5iFN9AiBtik3behuHZFJ3hXuqJ6KKjIm/DqJp8G1Xkf8j9TFhOw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.23.0-canary.78abbd59.0_1631568364101_0.07359458203829328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-snackbar","version":"0.23.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/snackbar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-JskGJZd7bYQWrdOxorsiI4tlq40OgZ9OnOiMI1hjlsr44rviQ3+GQJxGcULXoMO+QWl+itIc10ZXcgplAQ4k/A==","shasum":"87f7ca0ef47025aa6dabe06c144c29f1959aa4a1","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.23.0.tgz","fileCount":19,"unpackedSize":78046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QsCRA9TVsSAnZWagAAwmsP/3z52D1dXH6TeHv+y/kb\n9DIUhTOtfRV4/K457029YIzrot8jabjBXI/hMeH3rIwxz0MlFqAUOWdcO4U1\n+r1E4lFEz0xpEaCY6xthfr12kvXzEVs2iHXMtPRqfyy149ceOca4hpsT5Ver\n+YoH78bYDva9f6UqgloQmB7MrxbcmXAqJSNSZm4mAVXdgQbw823Xys2pZYvT\nfh+9UUI++l+ap/g0ffQxgF8sa6pMsgPOruqBZmd+iYqjoAtgIICEi/PiYUWy\nUYOzTnL9dL/hH8M6V8XPaseghZHXOXydOclHzAJev2vHM1AOdlV1lVMxuWAr\na9zUSEpP5nUx4u/qJVVViu8167w/TJSnTCM4vbFZTB62LubCXnWEquHKoGaJ\nGB80I/X4dykuAulUIUQNVnBH7Kg3zrOMeT9KnhJcr/ftMXJrfIYm+E7aF669\noBzFAC73tINdSNg8uU6RDBHUouQEYg6+BLbHkwTNP0Jg+/dl37/Oi5YdEobp\nxlJ9wMyfppxwcPVa0oFmUZBo88sQdsltK92APQj2OqF/k+wuyFF7sPl8bcmp\nPmxiqtqIrnAY5EYA7F9D5ufOtBuIe4bUiSV/O743mqSumIED74LomwYU+V3g\nlP10RP6EpYtRt2jDL5+j+xJ2EW3y3elUhmeMQ8XGeOfzqZ3r7fzHIa8wwVrh\nd//u\r\n=VuDh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWXoM+ZJh3E/+FNdH/cgYxb0LDbRlEM7aSb3wlcNcfNAiBKG/FAwYaAMxXW8FSFOrxYjHNqJAXuTnXP1DcPwfPK3g=="}]},"_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-snackbar_0.23.0_1631568940434_0.7661545989147276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.9830d665.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/snackbar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JCiSU1ZR4bkzwr5l1w06nlFJoZp9ka29FZdJ3IOD5fbjMYxs7ns/mEpbpHKOLNA6xFDYM4gDamOfX9OkX3KaoQ==","shasum":"cae857fb29f24dbe9462e1387e48e34759ad83d4","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.9830d665.0.tgz","fileCount":16,"unpackedSize":64062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8R1CRA9TVsSAnZWagAA6tcP/2+J1Vhi3NNIWZiEXQX7\ng2yfmwfZu3n3B1MQ4abIGW8u2ihWYrPjgikJtpA7GFM9iOZI/OfpAxxIDtxY\nxcUjDDlC1OjBO7dAe7cwTadFPs4DFySx3QDG3piy4OILN4KrxlGOsAk7l8zR\nS5OCxQYxJ+PqJJ3FshhO3bI0u/4qYgdi7eEEzkjSX6MD4B0T2p2De7YIFhwU\nC4Zd2m+TsguRtApm0QiUCl7r395/Y3K4p7C4s7tmepfbC80Mf2eQ6t/B3Mdk\n/Mk+TayyN9vYMxXo0WLS3u932RWiH+3kBUNnl96nhkgOVbZW5suAyo+ipY/t\n594/a0upF8Se0KZpcTyniKBgJdb07MkPEdiqI9vBj/bGJjFdfsZzWCCywrbT\nJ9FZcXFXS/IFtbsdoDaPINtCIx93Org8FWoTtI2//9cphaHiTgVvqjEBoalA\nFIZ5V8RO8/mF0a29QbpKDKxa7HjkbiWIKzW6MUwcEM9Vn5L+xItsLndO+x0e\nnQQzDCKVgDJ9GhtK1pAVZ9X5xq6wXmx+fq2EAyQS8hTAKkNQ5X/0X+IPnQfU\nmQaDid1FkXMj5dTgut8PJMNExpnr+jpggMIcA1cyCJ6/m67XRRQzJt1QUK+z\nwU/vyAJLL8qxHBqx29RIQqFLYduJhUisrewDCQrCgHP0i6NynOZsDfoNip4X\nvqAO\r\n=nrTD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSLX/OuHHVKV7DOTjHRHSKMUoIp/5q/edPPiMKTS0YrAiEAyuODXqEXmYS5DzhIc637trZOHtC0TDxDreWnvwxI5L8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.9830d665.0_1631569012945_0.05149181532111724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.20e2081c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-g5KPAmflMNyHsml3OxkIp95a7CUvAgsLAFTh7MNJIZxx2SblNb6xHRstD5uwJOiV6/dSKcjc0WjlDd9lCp1xlw==","shasum":"43d5c67f377da8a4bda55ae60ea8db59d59fcab5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.20e2081c.0.tgz","fileCount":16,"unpackedSize":65793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP99sCRA9TVsSAnZWagAA9ncP/R+wyB2FKCSrO9HnZ0Yl\nJjbsukLxTHcwWWSpSLLTrkfluoQ74AFM82TX824YezsS9no5okZeKQ5JpmAU\nVyPDlcaFidjf7XCoDd9q4SwtPVjS/4Oo867/RgkNGh+uiVKD2GpqyIwL7yiR\ngXNOvM9yAJwOcDR6bNZrj1+C6QeYri1Etc3IPfovXRmTLjGDmSzWE7YrScWU\nLgwDdw8WpoWyxzTzUm3jD5xkmamDn9opl5m0ZH2a1BwSiZu9HURgK5XXTMVl\n85mK4GIrkrrXH/55CN0a7x6nYs+Lp+mk5MHwPCi9AT8YlseD7O95xMOc6yLK\nMY4znbL1/xwUF50aVAeb1KRbhO5ploGkgb+UhEQxpmozAZ1nrNx3ZKSnrPP8\nQgu3T3Lk2MGSRIN0mrLbr8rCmDGkv37lMPGLyJugewXrj4FdX1x8E+bCAqdu\njz+KHYkyQyPElz6288gJv3382LeodRv37YSRfbEmJK72zzOq9YSHaocBZzxS\nTlcJ56W0xbZbsJ5jFDpLqr2i4YWq2eiGQ+U7UBs8DNEvCgnlrrbvtpAziKsO\n0/RlSxob7poOUut+S+H1egneE8LyFq6hafSIVQhMPmnEP60cykmaAAfLg+KO\nOwKm28jh2D8Aq0ArunTx7RxhdmY03OMfgnBKAIxiU1Yp0Y314R00xCA7Ea70\nuFXJ\r\n=EspK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfdLVOcAiqCup34241BwAUKyGaO2nvDmlUcEYnWggWwQIgUudRkcnkxIJnp0Vc8dob52bkLOMcN+nvFzyG5ep+qPI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.20e2081c.0_1631575916159_0.5461424504113588"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.583613a9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6tJirokXpyzwv5rGoerCp+VhZYkSuHZLr2VUbEDBOV4/XiIP35jXZyYMijENeVtP266eGqYDkc8yga7gYJKnnA==","shasum":"5256c2c25f896ae5b758da190b557c677b2ca12b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.583613a9.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNPnCRA9TVsSAnZWagAAB/gP+wSqnGtcXVj9Z1lDqnEr\nkpbAGMcMpN1yrWG7P/IkvbqWq7nXpOx8/ug+UVGnfXklGEXZNSiLYeiJi1u/\nTdV+qXfGIQEdLBCqIO5r/YwYqrrRoLGOzLnmFrf4Llgb8lBkux3uFLqXl0pk\nP1dxtNGlnv7uE5A/ZjMUkP2onrrPCZWj8L0o5cXes7nJpy0YbhnJlfUv7O9t\nmYvxsJYCuj6gQ5uutMspskyyWza5fhZ+hOi1UUTmFK9UmgsLWg/ooRvuMdgC\nIiJPjjYxRA/pikVelpZo9T4rb3/EC50I7dQeQqoa8LqEFjJerQivupMfltgL\ndEB8v1kuiOlgMboiulau9KsNC36hmGvft5ytEIRB52M0Th1QVOPX+AoNNV1k\n6GUOfXS9BBIzrYYYhxTr2UCCj9Vp99z4qUmncAiFp3CGEBLdAloy6g3QbCFu\n+I22hRiwK85ZQuJtH6iPYQYvrHgSvaG65VcKPRiO486xHzhryF2u0vKPWDve\nEu65twn6u2RSO6rIjZLPV0AuAIb90qAtS94nqr38SWYf+PlqsyfYRNQKiP3K\naeMzI1mVJVrvdIEtE+jY0B+SQ36T23uV1btGsx3Qn1LPnYfmUyaEk4at+13g\nsMiminr3xgXAPtBlaF9od7HFkXp3IO8gnj9lORLzDyfCMt0Fc4Xv6v372w67\nd8bS\r\n=AMaa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6KQ/cCfvFG++gsecFmezGDZcqVHs7xdV2ALHjKCWErQIgJzaIM3w51kwLiSPIJs6Vl26VBUTYpoyexv7hSD+x7V8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.583613a9.0_1631638503528_0.32633372296973495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zZ67md/aVHMbPG7QsjKDi6+bqGrQp7oaQUIB65F1OCUsTePaM3TBAHTWDx7tDQPdHZZSCGqGIa1UdcawNyewbA==","shasum":"63287dce8cbf2f836fc0c2e7936966b17c29e61a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.0e1bd56f.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNyQCRA9TVsSAnZWagAAsjwP/RZJKnPWqgLleiPe4MWK\n3VEg9xYrQhnJg/ehno3bW1ospoNGm3IPb7XYfmuEbvWfwsTA4KDXar2i1vh6\nWFK3XgLwW8ZlV0MMT1Z1A+v7ByyRcqeyGjCM5D8gvS7ZDnIXbg5iSt+IyvDR\nXDFlQgNTuvk+i1C0aZWatvytM6hlA8kP7U1YI1QG7koIheFzY1OpCEl9yRqU\nRa0PdpCs7JWyteDc9RmPm4jRkFLywTDUPRn2N1E7qKgkiiJhpce0S5MwpxCg\nhUbY1XP1xjSIbbYfVT3lXsvO+R6LwimY8fHs5mt/fUMTosSC33Ay4B2uwvVd\nw1xccFVTj8Xv01oynjjwrTuk5zPnrqzFBj6jap3y5iwnZu6u/9vw8BXOIAMj\nhGUssUMNlg0kxiIwZN0AgwW88oX+2eM4AjGAkmuF/X86c9w+kRB7oR21wMnW\nh8Y4k2uIjFBfY4bvxHM5vORvaqIUNIsSB133v8RfOBP7YsEwXgKvpuLs82zv\nNNQibO//PXCUgIv3K5RUh2mftf9qE4XncxVGmvXO5obFqnYj5Vaw0HNT/Imf\nCiBOPVfS6YN5BLpqj7LvgtUbUZW13UARxZlmo0QmLRgW3Q+R893cMVbmsfys\n1C/xZgyAPjgMKWeQ9bokxZDeVxsOnFEcKIDuy9sY3lhbnGKVHrLQXP9AB3Da\nZKd4\r\n=n6NW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG30NoXXL7vVOksBS3V77qdlQkotUkf+CqUUAxMAuM4xAiAHOc/I2VuLqYAPk8/Moy4yWLhj1DZMB89PF2IKgofmCQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.0e1bd56f.0_1631640720547_0.7504750655767007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.7bb1818e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VLckL30TM63dXTkOTsw/+xyXoC38mNVlmPF/x8SayrbqiUewzXw6B+qvNGwcjw3qASCzKWmQxsMUFWsqWGWm3A==","shasum":"db8b44261c94d4fbdb0e5824929378d855e0475c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.7bb1818e.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/aCRA9TVsSAnZWagAAgSIP/1yjPTxjKQ15hR1VFaMN\nDLe6KWmW7eGmSmQS3nIEARZldcdlFowoiUM14njWLd5UplEQDYotCi89Gwpb\nJmcmzFYEIknPTt6mOv+aMZC9VR7O9D78HSeL0c/vHS1Ccm0SB1eo78+e3a4V\nY3HLffVmmsK2SYN8l1WbThERI0b96ZMf2/T3CEOdP4N7Fv9oevyRVWDHnVJO\nZYWbER54lSpDK/E3yl+ehN7ISzGWaf1lkVGLIBRfiM3ANDMxaX/JGctE8lul\ntAKzdN7VfiH3RLYnn1oGc/z/JsIPcVnLXEFj2ye2ggHRrW8tm0dhzcFi2Yp/\nYoQJ32TDcz//4c8yEnniSKwfkS2TfHUOreiHCnTmRZqbck8rfXaobBx+zLry\ntblQBTB+BtFV5E6An6zzSLmU8jzNA763M2b5449GjYHA55y+C5uQTYQtP2E+\nMLbHFuA9oNn70/gtFgjAR2ppixGKU+hr9tGoqgRtjfY0qkSjDy4MZYWi26hF\nT73taQwcIcEJrlR0tnKRZh1fIBPhv+CqVv68risL+5xe2ePHRs6S0rog04WL\nkmYzJ/1VSfpNX9mJxXRlJlaaOlxdlXgqbqJ8RkvBhV1ylYPfP+7BT768FTO6\nTV1LXDDIng+AS6LOuRB/6K4WTAREbulvUpXJwhn45WoP6k7ckZYRwi74Ys1Z\n56TT\r\n=lhxg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBp2JxfKeIvjMY5h8alRldZlUFM+5qFNrhwTBS0GQE4AiEA2VjhPrTOtzwctP/Xfwgtn2j9q8cdFtrRU1pTwVMgIEg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.7bb1818e.0_1631666137949_0.6388015054719176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.b5e665a9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E4JQWuEPvLpVYWhtRGYYEXdaJLuailMRyBIVdM4fVBCvtT2NMVFJaNap46rgNLqwDVXxelBZgGDWQn5I9faWDQ==","shasum":"67b1009bd6896013c8ce9345b559fe2e3064ed2c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.b5e665a9.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjeoCRA9TVsSAnZWagAArc0P/RqAOQPLnYRsAIbtiY3/\nkS9NaHXbSN0HY3szz2WNXEK+c27n1WTI70RTmcLm9FZsyzyvaA+hoRnr/RVO\n38skuQpKPapkFGL4nvyvzCg4MnIoZKf12kdUosl/7DXugiEyX2s43rT84OqW\n+L01qTW+xFMpzI1cFXrAUjxfxlBriwJ/OM8NlPKDy1UisMvDAIvzhoW7dIeZ\nz5sOT/RpMzXaxl3GdUNfypuUOYIBHhYmH+SrEuYGpLbxerp+pQ1Bxba51v33\n+fFvFMBRIdqOVmDeJ7RpyxRcFEPEwPbLZZFMi+hr/L1ERgZ1L79e+Tfkt/Y4\nym4FtmWc2rzYUv4cv/OtDp+J5kGAnGUTN9rhOZq/AXurKrtB5KHrJsSKOIEF\nDm603JEbRYpuQ+aHCHk8kj4K1VVL0av+4k2QLIemNUc/8n3QHrzWwgsY12oY\nMXk044J6fxRu0j5oonwG1kKDXzMR5OK9SolzgMziAp1G0+emA6lW9RjP8H6f\nObw9p34FqhEVo0BFHjEkaSMjLUzMC4CYTEhQR2Uyr1c7xdXr0WVcO8qs0K6W\nt72OyW6jXd6E2Gg9R8s8Ioy5JQUDHmlHDtLp51Vbji3jp7MNiguJiP7IYGt7\nBLTGQY9Rnhc6asVCQW0BEqh9izwrmT82E7sYC6e/ytOE2GhLEhw/d4A1UV4r\nCHC9\r\n=X94i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8Xg6r6kMQzZJsU42G9lRy2aWB/+aF9itrHkyTWGmaFAIhAN1OVwF4SI/mAOZEVxVzM8Nx9e1+wnjdVTsYMFbfNNod"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.b5e665a9.0_1631729576833_0.09738945362015006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.ab1e177c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VTpxvh3RdG3rCc76nMNxD6z5vxPRInaR+JCnyFQJeWI0HEbSKVdcJOdX2N+fSJFV0sUkTCUcKTm5CWw6CZicow==","shasum":"6c448589ef20103fd093954c0ab66f4db1d2883f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.ab1e177c.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8TCRA9TVsSAnZWagAAYQIQAJaw6SrNXOyT+m1olxyc\na0Q2WgW4HxSsGgPsr9REAK5tazGsDEVJAqDlZoKxqzVohcjildVFoplrT0of\nBvTJ9Mwi3SVnwI3DEr0AMxmv33hzvNYPSIKdCjCqtSfWJuLoV4W7pbYMUOwK\nIDplXxmmB6p383R3HH6JamRMVkFXuhS4+zZJ4Bl9MKp6CRZijCrjUpTuC5Jf\nRInbAv2SQn5S9m9fWKK9jGrG0V12E0cSHmLg3Ei/0B7tVcI1DQpa9KGdwpTN\ngNqWSI3eZSh5dDg8PW0mqh43N6wkwbjZXhL7SepHyzLv28ZPGK/pcfz7xjm1\nTmNo7uO35ZWSOaHQEPBjVv4hXKZisBGMbbrueBQE2NOvMdUKO2TGA4tCNL3H\nEw7Mk1uRwvkG3b8EGKLPBx+Gn3rekx6Ob6c+hyvx9HecdJHskgbGSeBIvrXM\nDZ+M+LzepwXo/MoX/sntle6NVXgRKTE3oGYt5nSIsqp1t5EHF7/x8lHJJtUu\nqh4ima3ppS4qJz1YCQkuWLVjctczElKXWYGvl5C7+6dh0C0PTu9gA7aCP6VM\nCbv6Xx+UCP5fpifeahBXznWxhjY5pGgGY14GJn9rI7Q97M0gsq351GHAWlY0\n8LkbIbmmK0rwhzAkf09nYdvf/NdaU3myxq3Sab/77JPnTIRKtNnnwAsjZU74\nWF2E\r\n=CG+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJc42wjzgkf6HPn2C8zX3JpztGV5ARei8MWNlD3+80TAiEA4YI6Tkj1kjqc6+ydcU4CGW6uDm98KDbQLnxzkY6/Uxw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.ab1e177c.0_1631731474914_0.9036977139510545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.8dff8894.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y5mjQrhS4SF70tXA7xCMQfCcRJec5qgTvodyoEITOHFr5daVhWBh5n1KmA09WKpN4W18aP+KVx9PsR5vs+/+Bw==","shasum":"79feee3afc24f88c59cab27ee7a60f01136b59a8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.8dff8894.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkSlCRA9TVsSAnZWagAA57cP/jPuVg6teY1qy7oZWsqr\nT1MbGhGSxRsIMyCXDk6A73HfTh8BvJfQufCbQb2Auy6Thnwm4W3p4Y5qv6Ri\n18+hoOCCnLaD5XwTtuksG60bG4C14a+udGJRgfDZC0WsdKkix2jIRrWI/YQD\no9cVAzTgWGRBV+mQ41nmNZO0NZs+JLY/oPUAY0GShQObNmu2UN2x+w4PPX5n\nzPK5TZXGrqV3Y+l8ZPBqWkS/wXPUAfgW5zIsi+1pfIKfpOmoxfYN4IV9G0ka\natxSjjuRgKxE9nC53wkD7On+L08lect/IylDApkkgtEZSVVtUeHscjiyTP4M\nJB61D5qo/QYOh5brql0a9A/goZrG8pI1MkMUUvXPfpN9M+XAfQ00uVGBtsZC\nTfY2iAI2z3YuFS6m9Xx1RL9dZ1xIBVLc5kcn3g1v9pDY5Z6ujQqiCnRN4r7p\nf8cL+RzDphEkEupuR3RjnpnAhORkHZG9oWVx9UmV6ehxSuZLSbyvp0mQZrsD\nczZD3hPeoIvZn8L30j5GidIcdbOkJL2Bkn1sl83jmT3Rqx1LxPseEby1lAuH\nk+f2ykZllfxDZLBxkN9CB6WGiRRcZ7oCPFVgZpklUBK107CyjikZryEJsBi8\nZDU7v5boihg+apBHZ4TYgeuWwLdAzavive0udF73JMdXXDt5h61M+kbdSRw6\nAxXc\r\n=+2Bc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm2HmngcFXxj4EBQA01DeJw468ddOGb10t36MJP3J/awIhAIZsb/kIqY2TgDghoefIyMKLB9/SwKdt86ObgXGG6Vu/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.8dff8894.0_1631732901699_0.2971346827342314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.9cd7e927.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9zPuzgDjPA53d7iTN5EMR35sMdCqoi7rlceUwdfSzzxL2JU+fXpc9FGFOHa5kTjNYBV+bXsl7pKpDIWGb4GF7w==","shasum":"ccb1d7a35de2e4e8c1ea8c049b650e58031be925","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.9cd7e927.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlg9CRA9TVsSAnZWagAA+ugP/A5wGUlQJ6uzEtKCtzbV\nIWMTVLo7VvTJe5+UT1ZUiKuc8HszZs+EkybKAlWeAhdGgK2uzPHatVvid1ZP\nD0q96IMFom48CcSBTvD4HLfDZW6L6Sp/Q5FREQQQP8E2Rz4q9hGbka/MsGER\nw7LxbClnIN5MSFKc1GdQPUZ1Lq+qbqr/HOqUbiShxa92LUa1OAW3G5i6zS7U\nPp6PHtM7wkGkKUWenob1aRTpZTNtUlLwbDOxjeuNOmuBZbuufhG8bKS0Sp7d\njl82Ff7ljNqJ7DQredLIVDU6/ZcJXA3cF4VA/bGvjtIns8mtRPwBGyBP3zr/\n+bfi6VhEIUN4LB6aHJI52IZw/bPf5cBfe+0vw6fnd42rglJbHHQkdNh2liBC\npPU4JMiepiyzJU6f9cZIDfPSXBiEZxir23Lq2g5PNxBrHLu6000XFv9KTP0Z\nmytTvUAGtrhYOekyCFWFkrZIdOBgblWR3v0s3fhhwOxAPS5b/UallBMlTX6o\nEkFtEu6WF3qFh4LF3NsVvTTk6SAfC6nvOK0LQXsGjVoN3iNNK7NNLfUWW33L\ngbvJICfijy1lIKWjAkz7sHbRjGFvVrh+4ATvd8XR5bIejHAiORy7K3Jma9VQ\n20r5D3nk4KlMa1Gjk0lh2o+AJdxlTBgNfiJ1xvWdp5u1v3uAhWbrtzgxVe3o\nzRim\r\n=+dBS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFMe/KllBVejJwo/3r+pL5hyBtUHezdRteXrCPuObyyAiAvTE/eGUJn8kMNSDbDKW8icqe9GuwtLJQGCtY6zmmEyQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.9cd7e927.0_1631737917843_0.5299191288593881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.a7132082.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qjplfoY0CItkPyqdDE+oBNIYDNshFCsqgnDUOXdikHx5opvfP7L7Q/cFIbzMuEWeyCZFhS+ZOOVX6/a7jlyIFw==","shasum":"7860189531c1a08f9feef983ec55062b55b6bb8d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.a7132082.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQml3CRA9TVsSAnZWagAAAFsP+QGUlqiaxwYIBAOTOZFI\nz8+Qgo5RoF0l0tSugT64gHIqk8QYHeCOmvYj+xBPFIpQYyeH7qnSekNhmNEd\nzrd8shvHF9wBmx5lpzn8Vx/L/54yQ8mHDytBOOd2fRv4teLEVohjCoG6T9Da\nNNP95H0hKtpK98PvZRuXTrAKaGPGaRk27hWzPL9CxVly54+Nsoa6GHNdIK/7\nUO6ojFklFdOpUoEz9gPnxiHUKAl97+ZdmwrsinlzOc6ip6AVSg5H/vwQhn71\nGB4ULlr8rYrlqsOIISOizFjc5NN5H8zekHDUpL0T92xorAEpD3bqF7dP/QtM\nQzIIQKMOESp6gStUhSb8S8UKv2SWpCdjD/QYoyNrLer70HHFBGlLDB9WkVu6\n91PepuhuYkh+0HbUIq3Ry3Q3T8Wmhj1jy2M1NxR27/gwHndaXJJx4xTQVZlT\nY9LpZEx1sIP+g08zzQATSJV42M++ogGkptbkESYNaRzEOwyLhVKKYrJ+q8XE\nuD93zz2HxNfPUBCotnTJNwQugYqXeCFaclFNaRg9ILJiZX5I9/jOj5hAIPqR\n45NvN23XjZ4KCcogSS0xH/3ZeSSQcIY82s083twnptN6c2dKsO+dYDkL3Yly\nf5AQFkCuEvStzoY55NPF6doBFApEW/ixQ+1yhwW7UJp6ORIl9wugBBXVfYG/\n0iZ2\r\n=A85/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8++AmTpkvSkpohA+mTaamxILl62n4jlQhLDyvd8ENmQIhAPExTCBHOuybM5fqHp0BEo+pf4qP4THMhGyaxy7S4jtW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.a7132082.0_1631742327422_0.8340298426080297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.cd9110cd.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zttrcG5mTs3jQXhHYuDYHSy6ZnDm6erQ/vwzuQ8DqPeDWs20vJ9uJoFbPajOJkXrD0Jpa33b+NvOru7F3CGiEw==","shasum":"fd8f85b7cb7e63946bbe094eeea954deea506935","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.cd9110cd.0.tgz","fileCount":16,"unpackedSize":65808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4KyCRA9TVsSAnZWagAAWGsP/RwYl6hdMqNUN19XmPly\nD1OdkJFbxNUBtoLp3G/oGF8zJBg3QqGzFxWceu6In4pvXtofJSLMc5j2oQBz\nUY5DFRZ2UOOcdmyadHuc6zT58LXNk0ddD2OOOtwV7QiGBX6w/eAqPI4St7wp\nUF/pYljc0bowszb27vj2FtJs5xpOO22vzY/MyY+Xg/gd2mbf6OWk99xHEKfR\nlVVGi1a2Naj+xJ+fPNZJ7xElQ+0csNAoB916kEXuiCyaLEGlwluBrYsQz/t9\npQdOzygUehx0ZdOnbG3eALt0aMWQEataXY5RvRO/kvcGkcVLcTfb/54quQcW\nkqwaB/9rBBSfsRbDFVh8ED4OuAXqVW+Slw/gYXuTrgio08uJtQuaSsFu63ZP\nlKpoKLn9lIYBZRqP35JaTGOtcBdp1M0d8+COlaRTy8/gARinc1U67B+BJE7k\nE7xBYuxGM3/PjMpBF8lbogt0zVzi8XiG37FY4XT7jvdi70qfNX9nN9LXqf0Y\nITkAwyc2NTvNqsIglH4pPUkHQqaQ0gqthrGdEkM1ANEorevRzR93+uFQ+FZ7\nWrdUoi7/VSjJGLZBxlO3Vbv1LnOZyhmGTTOkbQhCCmRoDGIRdtnNaVAcpqEK\nFPvNr7Zs0dFQ5M2TF1G5bYnEEu0dLF2PdNZ+v7kqCUELZITVdmfnuuAOxAwP\nJBTZ\r\n=BYJq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFRmTO1RdotKdyEu1xiB6GRWnDzXPfQ0yE0ukzQSUsq9AiAgjEq9cf+dBC+kiXS5/51kci0t1XMzBud+dNa9u0VlmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.cd9110cd.0_1631814322722_0.5132145532473473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.1e5a9883.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-E2ZgvC9YiK4xvJycyOI2Mi+uJ+lsGbhBFC4Uc2ozMGhy/GLd19OnG7Z2K1L0bdQiXlWL/8wNIozE+7CLCOVkQw==","shasum":"51d924b67f7adc76b9023251a4c04a4165c0e62d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.1e5a9883.0.tgz","fileCount":16,"unpackedSize":65808,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRZWzaiRGVHzuJX/7mpCdhyrjy7NW6KJG34AulADd2ywIgDkg0i4sSPa7fm1oi+1Ikx7wDeyRqq72NV7CdxmJvB+0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.1e5a9883.0_1631911138023_0.12511521486794264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.32c830ee.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Qw5SFDohLFoYcfgVyLCt+Az1dDf1bxAjTUB+rXCqZRq4qWYnAWBcKylboBlAwQaT9lAGpkIrMFAVDBFOB8gS9A==","shasum":"af5f5ae2d24dbf9c95505f57bf0c65a20c918e5f","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.32c830ee.0.tgz","fileCount":16,"unpackedSize":65808,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZJXNrFmeYq61sLm3i5tvCkugf6Z5zJFo7dekbQjZPEAiB6ELVp9bnKcv9J6xpnZKURaKaXrq3ZACn+P0Lp9OZp8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.32c830ee.0_1631920116119_0.3754035568522207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.1de87bb7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-KiQLou8hZRG9RJLz4PA1GvgRxakcGc4pimNkCYRXQ0YYJzpgPK4JhNXAPYsZV7J/c+ZYuQYiVs0Yt9Wzn8zZBQ==","shasum":"07ae55c38ec8b68cd2c7b56f955d88c32f4a62a0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.1de87bb7.0.tgz","fileCount":16,"unpackedSize":65820,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDC7iLBM5i/xTvbXidKo38EwMwvwLTpul/XNhD0q7jV9AiEAyXk0/L9qH5tm1HvgYmmFN4ebEI90+wYQ0GngrXusL10="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.1de87bb7.0_1631991120277_0.5376554477314197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-IOi94uG4L49JnYEqQV5LIK5tDFELx4BFczxesoqxWLS+/iHOHmTqncxameOeBN5HYCPk2cwDRTdcC2JI12P7Jg==","shasum":"dd21b5bbd1ddbc68e18188959909bc1bb261c0e3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.f2ea80c4.0.tgz","fileCount":16,"unpackedSize":65820,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD20BtjnNdpFKvA7VLh+0oXAi7Dvvrg1VpVybtRw89fTgIga7ot40RwDWfaSjX87/jIbtRG8v4KdZxu79LJ76g8AX8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.f2ea80c4.0_1632160484833_0.3181792632842513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.569d739f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/snackbar":"=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/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-trfUPoJlPUbs+Fu1GFtmyc4p28Tq6SOmJIzb6SUl19Itsg4L387bGZHdAZSDGEyZ7cRMPc76m4w7UIeZkGC9/w==","shasum":"323586df3d6712d5567c4df2d2dae5a892f25155","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.569d739f.0.tgz","fileCount":16,"unpackedSize":65820,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo8e9HlnzGYoX2LmU/ugPCZ+cFcPy0hMkKnvS0MoLGGAiEA/rbj5fM/ciRCj+bdVNlHHTuZvcXuh/2gKulviEqds1E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.569d739f.0_1632173013720_0.24096508431223973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-snackbar","version":"0.24.0-canary.5a434a50.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4VDnQAC5IBgNvs0zIpoSHSTQMB0xXBBBJnXPKe1kX/3X5W/Ucpd0C/SzPbeemv7Iuhq2pkkC84ftOFwdhkhCTQ==","shasum":"5d05e04c09a6897565b1f1629488366f03e7b379","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.24.0-canary.5a434a50.0.tgz","fileCount":16,"unpackedSize":65812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2N3I+pI3UNAcB2+82u326TXGQonMLSi/k2lg+l93yTgIhAOFsAfKLt2b06m2r394/xIb1ZeovPQsm9TqotA/vPlWU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.24.0-canary.5a434a50.0_1632189628876_0.30247840467957054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-snackbar","version":"0.25.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-l4u7YSH2ZqHphKPcjtYxwCFKpFJEx/Q7k7IfD74RAmjIfWcpBCHsLB5Yh4aCuSBlxmLNSIEpJHQ2ACcWEXyIRw==","shasum":"47857afac0fca4657e5537dbc1b1f7f725bc9af0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.25.0.tgz","fileCount":19,"unpackedSize":79796,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGARhSBAwmSLt7rLZ2xv++I5hlhkfDCBMTbNJIHuYMGJAiEAo286BfrNJp3lZgLJl148phSfXrSj0CE9bvK4Yf2ybqE="}]},"_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-snackbar_0.25.0_1632192780026_0.3953491434018739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6be1a13e.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.6be1a13e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6be1a13e.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3ceaeaa7e4bf1c68a18e69c841acf156afc64dc3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.6be1a13e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-78jz9XM1nWZsQFap9+J3hDAFbEtcypzA4Jh9Hi06wQe5nHUe5xasZ4Y3JJSvM60ZB9l3xmRjOulfCL73jGdrqQ==","shasum":"36502bcd56ff775daac9c1a4818c0d8f2481745b","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.6be1a13e.0.tgz","fileCount":16,"unpackedSize":65812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqLppet6s0F19za4DykqbQGuHCFTiax+/XdeleJfVrZwIhAI/A1MGBfxRAEMYgC3qVeiF0WWXGCU+/yDseSvDg1DHg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.6be1a13e.0_1632192787403_0.0045286785751084135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-r6FNs4wdR/hHW4ZiEywVi+1cY1PcR4FG6/5BU80ldyiJwVBhv5+ZEYcfMx02ar/xuV5kqe3kPCcO6qkWzxeaKQ==","shasum":"e4d44e332984e9d727b4fc76518811d3d816368a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.b1c1ab52.0.tgz","fileCount":16,"unpackedSize":65812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFR8TiXCAbyuGHJDaSHiKS4TalCv9FnJgVD+IVRUFxzAiBIkmn/4TKf6HJEyYrYZleeXdS+BvhcjExbdLwKzU7oTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.b1c1ab52.0_1632193921472_0.41970928689756426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-snackbar","version":"0.25.1","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-6DU4U2b3EStY/FAOTYP2dMwvANuNl2j5At0uhURvsPWqPN1hFfQcQRxb1S0sBJ7PXgL2MuJVqVcU/kJY9NnEVg==","shasum":"ffea12b7175ab8b75d6480b39910198cc2211a00","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.25.1.tgz","fileCount":19,"unpackedSize":79796,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDic1GBAVDa7wQ3JIchRSWNARNNz/cwfkbqlcmr3Jr4SwIhAMqS2A32dFcWf8zezrifhnORf7ZI8TGdb8QXaBzdTD/w"}]},"_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-snackbar_0.25.1_1632193958635_0.8013193613139804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.ae060177.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/eyw69AD+RQW48V2s1I8ei0QM1tjl8H9pwroIMIV6THSYGc4O72NpVwxV70uNl/znRb3Y/ay2SVihTBxQM9WzA==","shasum":"0f60e07b3d736bcddc247902629f5ea6f8a994f6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.ae060177.0.tgz","fileCount":16,"unpackedSize":65812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBS9FQQTwlKruennHdpigmj7W5S+E02nH5p0gCh3RZXLAiEAuia6TB425n9HQrrnSM8nf34Nwnn601jpMDz2doZFB6A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.ae060177.0_1632235076975_0.2540330086788285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0ZmzP4H1mLIQrv9dwpM2aopT3NULQUKkp1MQ0R5jE4tbOGlTwTGmeQ9oFOoszKU4j9Yo+ZZ9BAzwNyowK/0CUw==","shasum":"35b8b42c408ed8cee7c7f979f8e0d25c0775e013","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.b6fe2a12.0.tgz","fileCount":16,"unpackedSize":65812,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnz1QtULOpfcugEGQmgLp/h2IhEl1t6bmJxnFgpx5uvAiBGwL8OMNGI6imXYp0UWQBKgly95CpxD3sO64oy3kwhdg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.b6fe2a12.0_1632341766980_0.39145817640040725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.07e91417.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-OPKU+B7ENbDH2PinKcWDZAAkVwDvxN0HqFvPHkVOShCmCwmVac9gK2i2PeMSNCwRe0l4uu6kmuFPSmcYdnDpUA==","shasum":"e3bcd20532e75c0b2e2e24abf2629c6a158bb78d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.07e91417.0.tgz","fileCount":16,"unpackedSize":67185,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB2tYMm5PN8u1ocHHdeOA0lpLKrcj1rqp7C2h6u2yL8AIhAOl12tDTLcUOfdkvCW1xqEWutmFFs/kznZmm0RHNUoD8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.07e91417.0_1632344735419_0.7198852741475865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.e2203ffa.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/snackbar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0xovFBnylkiiLWYfEHbtZ3EvaVOsa/FhJa4lCEU0aToZCdKsrBzAMz4zPcNkD5nOc0KUZpghU6CXhCCDZUYXTQ==","shasum":"e30d86c0cf8a746fc2060ea2cc8167875844b4d7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.e2203ffa.0.tgz","fileCount":16,"unpackedSize":67185,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSolxMqAB2HMPRn677VVkVCelouDDudc+cnGG9mkTZVQIgEjbgpDelpc4QiiU6NctzpFIeAmHFjzsDTZNamfKiBj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.e2203ffa.0_1632421646453_0.3453356677375148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.4abe237e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/snackbar":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4SdkVMiV8hg0RFRg68v0tVosW4HkDk7NijIZBJnHEgfsqTGsaafPwFHry+IF/jLDh2AgV/xtC36awPxOm7ZFRA==","shasum":"3a5961fd8b8d516c17b0291a30f2901c42697d36","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.4abe237e.0.tgz","fileCount":16,"unpackedSize":68051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTurnpS+8OtH0/NcFFXAcNeEtIJ+Zf2DUOgP9DtnWKeAiAcOS4NvPHV99+8Wjinr+ggkawMj+9sA4ayDj7dEJ17YA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.4abe237e.0_1632504658195_0.10713091028144595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.6278ee5d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/snackbar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CI1+NuhO7U2mxcd0f1Y9MWagZYVUON+HRPn5brYe59JV25mUcAuZQWiuBeUsR97M7vhOa2JngXDels4tHZ6o8w==","shasum":"0c1ba4690ca742f2303d82ce06d9904dff13bf5a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.6278ee5d.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu9pJ7FQTTtU3vp0bDHsrKPXlFxP3rnkKjUV08ms+jegIgXYulJJQsfGSqKPa31MzpWNpfy/kZwiy19dzduUXq5f4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.6278ee5d.0_1632767472669_0.7367157913023648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/snackbar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-d9xQBIFK0UzKJV8ue2WI2RrBbuIygO0N4hImP3ezdRH1eQUP2weedXZg5CPnv4NFVNRmx3xKOXIJrpl28BKnWQ==","shasum":"0fab0ad685f088a46de81885ff19310d0e175b45","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.3a5d5f34.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ9cQyqyMOCPy2k2ahIqHgXyBqCd0/ibKrCIqCcIMcWwIgKtbym+8ngTL2rKs+iEKkjfBrSH/1JdqmgbmvGonfwd0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.3a5d5f34.0_1632782481514_0.23259565579828623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.143ed3c8.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/snackbar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-gZZieQ1b7zzrUe2keiRw9tUNiu0UP1ceQCVcxilY2T6CUsCNiPOaiDw2/F5cU2gcq/pducBoLavRgetpgweEVg==","shasum":"6eb5a2a0c49aea7acf1fd16a838a8554363b15bd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.143ed3c8.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCWznZkVKcexEV2TyHaxz88PSF2xCFEJ9DhYmZneWjDgIgHz6LcTJEdtlza7XcYzX+tbI0CS56ySt/OEFQFSmPQUo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.143ed3c8.0_1632880241285_0.1412568414622568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.e5923d68.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/snackbar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-PU0cvro9psJxelkT+gN3emRpKoPNPYwWIn0li4mMbq+DQV78qDvR95/aCKTshVkUeYf/v9iHsZWBOM3bNjKDJA==","shasum":"31af81ce28e041302242bc9bf6ecd92c3fa3498a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.e5923d68.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYzZZQeLticlzgAE3s2yPgBvYTvGFpml/jwpBRdAHGrAIhAKaa5ZT93Vn+MeS0OQhuCn2t9HhA5w60Z8cwdEyk74yI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.e5923d68.0_1632960338734_0.5497308368167235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.d8ed5109.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/snackbar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-K0c7cvQO6jHWliBX6antCFcZZqDYPB89TzWSoBeVMap5A8kHVBJkfRrwnT6hA6htRmzh7TIRuzcYthU2KGLS+g==","shasum":"5bbad5a56b8594ea2b9f653ab7b2d3a85c593b5d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.d8ed5109.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7SrCKu/TuQNHzT+oOxGCuBzdVBCdptl7xymxJI2xGWQIhANJGxG62YifhIbqHbRse2J4yDjDN9Yi9fsboDqDuYMZM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.d8ed5109.0_1633044823552_0.8576112637850712"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/snackbar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-pf+BHh8TqH+lGlAzQXfG2HwLArTjG3jVJqm7G4PsyCqiyEppqqA01lqVIvSq8OeEoS7Jhl0J3IGorIfaqyFWwQ==","shasum":"2d61b6d41995cee0375a1715e9c8f7e61a138cb9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.0efb9c2c.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgNuKPkcoBkB1E/oudftacXBwlwE/niNGpl9Gdaou+OAiBXXsiXJauwG4bJnfW9qs+5kPsjriAljy9VfDUpQ7BCeQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.0efb9c2c.0_1633140486551_0.7728555092877663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/snackbar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-pjzViPne4eNgiykVvFK7mdMV4w/c0XgNlmuhd6xDqPRr0RPDK+ucbtE/3hLtHMP0ObqgE1vvEhg7P4DgctsSvw==","shasum":"dce53924d876835ca7439cff38a1b45c7150954a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.1c9adcb3.0.tgz","fileCount":16,"unpackedSize":68053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVe4loiDODdfjrkZNTw9kLhA6Bl24ZXQZ7nb/WduWTLQIhAIFsrua2PKsbXaDxCg41uLgnnYO+wtmlChUm4Mz+trGB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.1c9adcb3.0_1633368804706_0.2157228855797375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.dfc00d60.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/snackbar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-i+WiFcMBtxrGS6sLhZqnvdLxFcdYu7vf6ZckiZINY+D4cYm3veUdWO6lAy2KkdiGz+p5HhI+X4qEezVz67kQjQ==","shasum":"133cc4f06bfef87af1d9c3819337233489a26c92","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.dfc00d60.0.tgz","fileCount":16,"unpackedSize":67883,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNYxjilvLPF9mWXEGGoAIG9X3/DIetaoqaQZYdOUfmFAiAjnMJZstA3lMKB/9w55iNh2Oalq8bZyHtiXy1uhZux8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.dfc00d60.0_1633741025870_0.7297612837516179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.c3aa844c.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/snackbar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-kDn0ep38Lg7WiHQ0vXNLM02WC4YcfuyR6NKos8Lq1Kh5YfOpCUumTxgdtoDmU14Ylt9CUd/I+UdJyhI2v+Z61w==","shasum":"31a80d45e5faf474cb9efc681175c3cf95fed9d3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.c3aa844c.0.tgz","fileCount":16,"unpackedSize":67883,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRAZ6glNHKIIQk4glcMQWQMqza5OCLKaUWvVyotUMrzAiBL3iXAfJAGcGMsIWzUWR2gGv4eEkhF+++IOPWcN0puSA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.c3aa844c.0_1633994052226_0.3426085774477483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-snackbar","version":"0.25.2","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/snackbar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-knki1w+rDDrUUtyeoZo48teD1a+pM3bZc+tVTi2ZkSPo7dA4DCXemuPUufF97oMca1gwaZIzpTDc0Y1a+xtwhQ==","shasum":"8ee981340e216900f07fbefe7de590b19f33ccce","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.25.2.tgz","fileCount":16,"unpackedSize":67848,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKTuMpItEofPQARquHlE3ei9BI+jhNEXn3nPVNzCWB0AiAWgntfJTx2EAKX1xNbmlC6+X5rAWP44iCGdcWRTnqoEw=="}]},"_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-snackbar_0.25.2_1633994309169_0.4370127534472059"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.406d6fe1.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/snackbar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-oxZAo6iqfNohMMODSU2lhWNw9RZ0Rn3bJ0ElHkkAvTXvjSHgKk8enCSfp6vxZP0Q0QTWcBTybYicQlvXrqIwew==","shasum":"aa16425b83d915093375b7b4382c920e9ae803fa","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.406d6fe1.0.tgz","fileCount":16,"unpackedSize":67859,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEUihPQMsZijo9LYdOBFMprkeVb3qagaQyqlpyjlwNQAiBA76F2HQ3kd0sQEYo0MDLe4/YHlsqvQxb+FexEmugXIg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.406d6fe1.0_1634158758910_0.5864216311311108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.ca0a674f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/snackbar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-YmwcULtQlO9+MbgPmofgya6aBISvhUNdGAiFi2BbZtiI6ZVhoW9/RYXEX0AwNirmK/wFbqkt81j+NVSOifDcUQ==","shasum":"5e8e94ea20524ec6796a475a2e3c3c60e58e5c3a","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.ca0a674f.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgWLFpxKGCwKYM+wkmuq0ux66CO2B4/n3D4r7dOXuyfQIhALgN2YsALbOKNAT0oeibXxaC53r2DG0yn3nqZFQyyDki"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.ca0a674f.0_1634593002265_0.21842886831005148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.eefcf660.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/snackbar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-v3lF+VHTlqBAJtQXdPRpAe1TmtGb1mc+XeAWeDh7mc8qH4l9l3zP2RRfqa7bsvz0LeuF6tEVCQkVoT9Ktysk6Q==","shasum":"94040d8ced5c35915e7ca397df51a301ed58daf9","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.eefcf660.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrPp0ej5OsjnnpG6uL1ZX7A5BxDBNzMhkGL3bQ/8lG9AiEAgLVOFO9/rRV0x70nDXZDKtpSnWR/hoURB8Rbc9e6uHo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.eefcf660.0_1634765007723_0.7994744234709967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.d21acc8f.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/snackbar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Pq/h/B7CX3tVwmo/Rz8vNzeds3XH9PXAMQZYrcSvclhAUYbCv4ZWLw1QznWRlAAUrYvtQqc/Xr6fe2+j44wO1A==","shasum":"b198a77b61f75b2624f80ff02fd15701169ac955","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.d21acc8f.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgUsZnIyKYxEho/i3kZvDXs2F1o+KhYk4cWpO9dxLTAAiBnZh8U1diSZyuHzj81FP7MOXKUewmK/SlDjAE/yQ456A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.d21acc8f.0_1634769140129_0.4951050865087103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-snackbar","version":"0.25.3","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/snackbar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-DJyWQl1rksv502qLQta81YQ3q3iy0GlVQcXZq88nBG9o64070qZW92rfZmiQ63MRwGbdNmrUFZ3QBoClY1JpFg==","shasum":"8031de833765cfb9c8d6cc0f39fd7359d1e66203","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.25.3.tgz","fileCount":16,"unpackedSize":67814,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgVrV69gBPT5XYX51q7mt0mflh4CuBplnHwepkJ2aAlAiBPF1XvhzYSuXVATpwwQcdhb3rlCmMJ7t71dHkAAHmh3A=="}]},"_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-snackbar_0.25.3_1634838938814_0.7927578977094953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.60449b7b.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/snackbar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ddo7s2i+C1jJv2ioBQgwusobhovLMvdOdeNG8ZefjI6dPUh52Ww1mpVcbcDXcTMVuPu9HmcUEkmAVp3GH4ai4A==","shasum":"e702f8e673bde62ef6c17d3da67d1f2920e58bb7","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.60449b7b.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH587lJcQMZXk9BUbd8SV6cmGUfzZPI2+mgpWWcvVhYiAiEA6J2BKTsaktiF0TNT6qF3c08CNG15I1vgPvjQFKujk7M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.60449b7b.0_1634840234454_0.19962416138424977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.0d8084ed.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/snackbar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-hBQA3VQSoX06l8bRdvE4UJvBjdCvYHZ2o3BEHXUeMIZWinzR7ASTEOaPlfQc0OFQmRzTw8XCJabVLb+zNRSfdw==","shasum":"558337ef6c950136de9a1b9486ae89acc448099e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.0d8084ed.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbmBZujoG6K4CVugFzpQq+4FX/C+kK09KK5pk9E6QoLQIhANVdKY2fL7bFLFRzrBh8f651UxV1jrRCUJYmRpv7GvkL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.0d8084ed.0_1635443085134_0.9217784168376444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.232327ee.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-JICl0+R9pmeeXqOGFgmLX1YfJHZ7kM7AgRRgsmgIxyRLMB9NSUC0eQimk6FeR73SX7xuOytzdyxAQ4YoaaNsTw==","shasum":"0664bcfc893a0fd321da2e18643baac4928ff205","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.232327ee.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUD07ra2EF1ASd73QbZl/jwSsbNUMZKr04/hv7T1NkUAiEAxQ4kzjB9+TjrKvOARgyEtxcdc8xb8+0cKxwBU4FtJr0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.232327ee.0_1635797735837_0.8549020568339663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.0a492ae8.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-DswtF2PLULk2zD+D6Fgey/RsApQ6G77XPbMtGSFeB6SDAJfrppllPn1CLM8SuvrDQ7PBKjB/v4f1g3p7SFj/QQ==","shasum":"5a1078730e2e7a386fffd5661ab751e2c9948a94","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.0a492ae8.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/X4B3pi3bBe36qSoIQtkHBNrgsiWD9ywqf81rFULv1AiEA5M7JExbUXJtQCmNjF5ZHlMyLJ6VxdxQxqvnvuU7FI0g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.0a492ae8.0_1635847216108_0.20737914769871257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.0aa18745.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Z/9ae1UKtxo3Noay5rxJ0ZBk+HNvbDI3uppjqM+re+Zgb+w++1JnPhvgxfDM9exmYMw4xKJgRRInT0y+8rFaig==","shasum":"3b7eb1ec8af7aac57bebd68e784e0fb558eda9bd","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.0aa18745.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdD70b+ryejR/LBXpsD769yJsYhCcufK/d7X7wFdrqrAIgEyq39Yy6IEwn//k2G3KqMLW4+AW/75CNHbXJPJcEn4o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.0aa18745.0_1635876461599_0.46425079996713325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.f3e28323.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-VYR/h/8DAUMdKVkq7klQ3xx3B565IIwN+R2u5ojY7aOqhnb7YwW4+p1oOJh8wjwHCn+8+tGJ/0cZKvnaH62uRA==","shasum":"8729aac493391f3cf625dfe6602f464847a39944","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.f3e28323.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXJqFN+utzq+rjFQzZj9Wz1Bx2W/ZocAysxRJC8LJn0wIgQfUOjxNbBQl6/8DVMChYqz46n78sR3Fp6ebzlC5184A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.f3e28323.0_1635879563001_0.5350776680039033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.27e05c5d.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-hJ0R8TYVUB9k4soabRMNPTBWyb1INlBxXKJKLg9vCtlhav6fPJqGS+hOlOP1OUJifNvXZdA9UT8hzsAloKSXlA==","shasum":"6d549e2fe7042e72b7386aa69795755992254e48","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.27e05c5d.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk6vMRQnr4MdKyaSns9iWHk0wUt9NjaVOfHWv6fgrJZgIhAMwbjeFxRIgYLx8PQGgT4yCBbGOZ58sM87waryZnxRYw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.27e05c5d.0_1635965088982_0.18688207481889685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.b9e44af7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-qY3Nk1/1lFl6POF9Tqmh6jGabADd+YPwMJ87L9qIQQwis8F4J9bCiOsUqKoVmOoKS1u6Vc01+1ilx5tc7HROAw==","shasum":"be3c38a556643da9c83537eb541e838298f65237","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.b9e44af7.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDACejg4MIgsZrGdGqctrjpqrup0H4paKTMc8aTNVxdnQIhAMl9arZ0Wv/H9LduSDJ8ZdIpFFHPnjs+nicFoy8uFKI8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.b9e44af7.0_1635966232248_0.6155223399448966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.448f6cb9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-f0ZnsUjJ0hGqpb9sBtdzqQBpcqF1Lz8F47+iCfeYWawN4NT0WDx+rdlafJ3M4GIySX2PpDKO883ED5M6nW15Cw==","shasum":"d7620559f65c12400959c65956442ffb2795dec6","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.448f6cb9.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChve8X4x7tsKDeiYEViMBkHI2DIjWIefdSjFeB20085gIgIBu7WGD5vMJ02NIRXoiuGUx0grPY7AWWrITJBRxCXSY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.448f6cb9.0_1636049265510_0.32168417823553663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.8067ce28.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/snackbar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yqPRKDAZfdQkOBlFsGXyySnNRpuEdvgcFRZgme0q9ky/zpHfXRP6xJHxn90r8Bbj+gRd+tVbGsIzOsmosEq48Q==","shasum":"91aa9133d58c096c566753f71f8c3e06e155fc54","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.8067ce28.0.tgz","fileCount":16,"unpackedSize":67849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0lMwkWxuzU/OYfReWxGniTLutNGVU57DCU6jbmm24hAIgTUyxqegEtQh6Q7SIC/dIx8I2Yk+31g+ryq9sEpfrTwQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-snackbar_0.26.0-canary.8067ce28.0_1636064537881_0.025467383451594605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.345c2bb9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/snackbar":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.43d08ba77.0","@material/rtl":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-EGJ6DU33Oo9QXlb7LOs5CZY3qzC6nCanaHXAge4Co6Zg3MHPwKVqzPUutczBwdfYJYtYbiF7kK0Eao7e7BUHYw==","shasum":"f35490ea4b13f01664ca0aa8cf8c0474a62062bf","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.345c2bb9.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3fCRA9TVsSAnZWagAA+ZMP/RolH18fYHvTq68ER1RD\nbdltIrVOBjdXlq7bNBL5Ej+qznQasCLoFaqvbd7v5V83rDqdMNDIWWITzp07\nEJ8ucDMLFy95sWaf81VAWWepf0MpnS0hPIqdv0TqK5UlolTeZDyysD1ils4i\nDLnXioXYSo/77t7cbu4Nyjwi2bqIHoQsc9rNvZV0QhH6UPvnJH9V1dDaWxcy\nuR4W2frUL0NqkMinhHVgVevbl62Sg4NGqpBTwyiPWgV855VHv2ft8WfHCBIC\nhuIEO3jZbBsNrl6fGCjEw/YfOhY5aRoydDlFVacg+8tCuhArbqbLKvPMhKZU\n/x7EBFXDYGOugvqfK2udu1UT1jXhdOVRdpvMCYxFf/+xalehnw4ji7cm5ssL\n3RFtZaBQ8GDvCgU0Qd+yiC4gIYSZmU3ht5Z1j18pNS9M9v1FQSeoHOrDJXU6\njf+O896gD4vcmqGAaOtPmQwxUWAXP1uFBNkTv2evFNpAG+wmnwstprF8INvU\naMdM38eKfPh90rgLPu5616sXNcqbR0D60EbZRZbVgAYrSMDpLwZNIqukkT2G\n7xy4k4yZohhFbIRq4iVKcvuZFlHAr5JzlzJNFgVPBbU75j0jzSORCM86iKNh\nRYi5z9XM3Po48J9Jw0aAgdBdlRiGTCTLFTCIqFt9IbFKhOFaaI9uW/x2/iep\nWy00\r\n=FglR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZnsa0ioHvarn9k6YimfPp0O4V4b8Rno1+JJzR5FDDbAiEA3RFcL8DdPM65r+3cxChlqzRvjF1xWa/pCec3p5XAFv8="}]},"_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-snackbar_0.26.0-canary.345c2bb9.0_1638464991160_0.5078516561299078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.0547aeeb.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/snackbar":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.17a072535.0","@material/rtl":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-7xtbUIQIFynGk9WYDqbxo1ismfBnip5+r2AA4KrMAwihKi4NPQN2e/hcTTk96ZwfTl8ihb/iK7XFxwDue4A5wg==","shasum":"b81a4bd185c2d42a7f23192c3cac8ab527c6f183","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.0547aeeb.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjvjCRA9TVsSAnZWagAAVx4P/i5cXSCrBd94MtzU+T3p\nwBv17kRZa0q4+T49iaFe+DBZ3oz+k76+iyYEuVppon7riwY9bBbrIWeJT8TA\neaaxs0EvLgJ/OfWeohciqGd1csVnzQnpImZNdL+UU2Zr7Cv8twbqfxl0J4SF\nSGRz7DHrpIaYzazAMODqJIgaxEGT86YVGdR+7bAMPdNMgj/6ljdjPdQzX7kh\n4aI1hxEIBh4lVhzsbYrsBscYPeqCT7AKlLREpiZD+GcX9Wr5E9jZKaRLTXCJ\nfYG8Ua6Z0VJ1vpvWIgX0E8bE/2Hl0sSnN9mbKpLWKBKsh0sysbbEreYX4qO0\n7IkJvP7d+i7c4Fs3P0CdmzWoiDgPfc1d/ND6D6uqU0cGVfdrFduK97oqInye\nUDjYBa8fuD/vPYeJJU/yzuopDK5ha3Q09hHMFqwVUmWRO3fHMa2Kx7kgyiTT\nHFg+HlO6QCrFIL5m2+/35ZK5/C0hQuQvSZWCHTQGVPfwt6DL5ezE0gOtOx2I\nrgpJ0vK4offv7uUiHxOtpzAkCHa9vPLU+wYFXFZqg5rIMQvAGstjrrnxylFm\n/WJik12VF63CfxajtQM2M5WC+KMDIGuyElUaTmPhz0bxrHRZn4196oo+up9I\nWZFRdL2Mexa+ymvRKMxNSz3OoFD7ziPC8gXaTQCtHoVF6GMPCm2U0sPGy3bX\nO59r\r\n=g236\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN02xnENIV472LiHI2oq4ZfbXFEoU6QcGXmXdEwGHAmgIhANAYJGQkhUaMs2Y+FQPn37G7BJaR8raszPwMukvRxrWo"}]},"_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-snackbar_0.26.0-canary.0547aeeb.0_1638808546852_0.5219508306196203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.3b2452cc.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/snackbar":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.b6510c8c1.0","@material/rtl":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-x3qUJJXVZpFQ1LPQbed2yqXmtlLK07X8eIYLuCBKLaY2WxWT1/4xOYJSOY2qaSe4UqtymO7BsEGWD36rEkFmbg==","shasum":"9241c337360d5014713144bf3915140d096a89e0","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.3b2452cc.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhECRA9TVsSAnZWagAAgQUP/2lEA5SYyZrzBmIvECTw\ngehrCmmT5Bjt/F8XQv+Bgg/4/B1kX+BTkNrb38vthRrx7MtRqJzXvvl04ldo\npeBTJr0kvADvp/uBQYp3Q9jAshSw/n/06Jtoc/O+E2DxO5/TQ9gMUy2YVQ3D\ncjKKc7XL4sv/u6eSVJdkBzkvkxStQA45ZixRvEVGugnwPQVBPmDv5WbHr63K\n/ZSwTAuGQaeJG2NWSsJYTsJl4sBYg+UmvJ5Ss/d6PF0EEkEOjUn1YBF2tG+N\nI6FxAjYKfKIeHV2TM8jayKYQn0PDDeDHMLq9TM0/Ta2YW9fekM7TwJd0nAPr\nS5L19nIH1ckqfGbP8JGbv794LvJQepuDjLf196hZ0zLi71MRirEcSCiXv6j2\n8hb+grd4XZTmMy0Huw2GWClHfo9hskrt6C71ODXFicikg5V3A4X+tGFVS0l4\nDx3zxYitUAJAyt91cn16T35oGRGMG9YESWdITNOmLXlo1M2fIbB0pyF9y4MV\n9nrqjXn2aclTYEJRSvPWYhxf7w1FGpssdkmxbcY4XyGemePW7h2DWZKXQybs\n2j4RtoQyqtBVWFVOoELYuxVQBth05Z3+mDUPALxrPcgBEuxxaWcZVhabpU7d\nzT/WJ2yheit7RTGwma03qaTYu2/PT8bFlA8koV+GhvJwiEbc4e9hiuMTAkII\nkQ25\r\n=LvEi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTrcDzG9WJexEGEKReiIvAf1hc5YMdMk3gLCJ7ePFpRAiEAvC98B3w3S9UZvMOSuMsNBz+U+E+c5Mv6ySCBzI+ziXU="}]},"_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-snackbar_0.26.0-canary.3b2452cc.0_1639008324334_0.38707145636484186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/snackbar":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.f460e23da.0","@material/rtl":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-d2aCrVTVZoS8mjDab8NyL+V4k+kDbpQdph8Yezv0m5fyB6RV6NUgIgG29aFVpfisNwZzZ2o8rrutEZsSLqQYlw==","shasum":"dc6ebca701b5e984bd71a18ab3af50f1deb12bb2","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VACRA9TVsSAnZWagAAV+4P/RJL0WcInXUxLyFVSGhC\nva1tBd1G8KY39xSNWA5WOqAxuFlRGBirLzn9pFB+TLDZCla6gy6UhD3UL+Dz\nZrNNTqITVsVv5/uUl8eRj6Qu8iiO6vBs7qmHpqwDWg+liTUZfmU59YKYT9Xv\nAJIXv2oClmL+bqyGw0E14mDXEJQZz8OkvdJOoI6tMUlV0zfndkC+VqKyI84B\nRklUavENx5jNKlBSC8SlCBgifmWUlYVu5t5Mn4Z9CPrA7PYlTmmiB1dqxDg0\nvnLwK6Pps4IUDgoCeMNfuFd4jREAHjmSZNHBZNWkBYQ+UQtbpv861KD2RUC0\n4uqt4SeSJf42zOCdmfzerkqyU2ZyLbTuwGUjRbMNPvYOfQ9sUWQ823zFNVlE\nic5Iz8WdJ48BfxRym+TCeAiNXvhOzivcLccTSU2wdpskh3U0jGDBPMJyf9Yj\ndruKf5QQWwYOGw99FfSnCP3tbHWAZdU09DMvml93YeUagFtRIzfByilwa9P7\n02OrHgcERQg3ZODYQD1BWZ0JJHEIIhKJbz1m9j+tSm1L+jzDjnSJjGQUnpnu\nNRpj6UAxFlKrwp5EYJ8zB2hzjuVT+/VeGCAMf3n0qSVpuGMPVmZbeuPvLD0Y\nLPpRxsP5Haw/Z1uQSIXYeUYT5GCgfXS3AiDj3ZYoLT2Q2STgTilnMCsJyck/\n5GhX\r\n=/oLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf+8d1iRzWjLR8/GJ5a4NrunFZdX289z3880EkY8nrQgIhAP2bG1h9M4sWy3gITjLSgS/fUUeYoTobzWYpyeUIDNnE"}]},"_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-snackbar_0.26.0-canary.cf7ba5a9.0_1639163200564_0.5237974855818004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/snackbar":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.3366a71d7.0","@material/rtl":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-7GZzZ3dzfAlkqu+4+vRYMugXhqGtYQFQXbVYlyEw0DJLrVQfekHidWEYM9+K4fwvXa+RaCyviYBhdhg50ZRsDw==","shasum":"46a8b7b47dc1d8c10061e8014ff7feff664cc031","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.e1bcf14e.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3dhCRA9TVsSAnZWagAAZgcQAJR97MSR5VWwL95XAUpL\n+ZlBft93fgiqP/VafwAKa+CcCep0mE4/QBZu7X1+zbG30y5zuXJ3CZ4Sd9gs\niWg4ox/VTlZtHsk2JghPiRa2oSHbFetL6WhL4BsyYEQC3+k3h9FQbTz5NIMQ\n74E/xOgz1sev7zXcZKzBdrkhV/fVzVmDzVdff0oQE3p5mKbMeDs1VHAji3gh\n6BEQkhiWReetBOA8o97ns6WXnrH84PBXzmTeOTXifeAbXtijzpyM46hcA2+R\nQtwokoGgOgBY989ufECqpQhhVCL1TOUnUV8ChiQYGnKtfD9JeO4TnB2wP6gq\nqoMrCFC4mvHu9XaReYG7VO0WC5AtttlDH5/kSolXPxQmko7E9PdZF8a/w+s0\nSCb2u0Oa22ScIxf9QjkwL7hwxpTL3s65XRgyUXJrVSMmW6ID9BNznQ/YY+aT\nh/isQv3Io94/nYKcnSQmti2v48PhmAdolVukMjAGRq1tWibXI2er/rDkaxc7\n84RXFIJsIif9hm90dAY7HOrfRRGbJwYRF29aEFEg834cHaSN9l/1GnA05s23\nxP/TZN/+TOpnHTfGeavz/AqkZ/2juySf0AAlD1HOpG6jUFxpbnoYYMZ/ny8+\nEZyFw0pw/kCd8Sff7B4iUwEkBNH5sgHR9GHkGx4y0uThHroO7Tcgbsl+WocE\nGSCe\r\n=xvxA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRlqKmtnwLeFQybj83s22H5Iw0jQ3BkrOr0fTZZqa0cAIhALjw9IOjl1xXyvZ7PqDxtPYxWnIjU3vPxzLnXjucpVnb"}]},"_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-snackbar_0.26.0-canary.e1bcf14e.0_1640724321779_0.8610344886531649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.b9d35b69.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/snackbar":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.c047f7c19.0","@material/rtl":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-kWNtfId5GHkauBE+ra3Hid9WdQ/sy5vkIlgOetL3ggfadGJIl1F9xASOYCahxJcxyyDikE5FkCtHSg+PY/xiKg==","shasum":"11d7bc273e1c86cc276c1265906abde351ab75d3","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.b9d35b69.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eLdCRA9TVsSAnZWagAADmYP+QBehof8A4cXEWd+fEHL\ncCN0h8pa2qwB3RKphPwS9eHuY/Laz5RG3O4m2oSbNdWTr5R+nxkZgB24LEvT\nNbpA5UBB3MXOVprLZWHoQ9K7OVR3Ztxlk01yZrNWbD1EZRJAopw/mmaRWeve\n2Xrj4LVUigqO55Hps/OV3T6w0NmSYbzpQUo4e++i/T/l8Zz/E19Gq85oYpvG\nO2GZ/A/8zrh20Q2+q15anKgpbxCPYmnqUitEmF8uRs9s2XToeBVFFB/lSHd8\nd5qKir32mD1JZCoD5XwMUw+00LVElANRufaVuqBl1QbjhLdr9meWfF72Bu+s\nl6oPX6PMX15tBoFmYRmeS4wMeNBtSoQuRnccXWSu5z/OdbDkCkuDQIJ4Cl8J\nniMHnCWkFmryQH0P/p4UCfi/xynjCJQ68ovTX8ALb4DK2qcET6kVAp+MigB+\nOCRaDjde/OIfAHNbyUkkZ8uNJgIbi3odAeyYI/V8NpaqGVU5cPrDWHHsvYQ/\nT79FwbTBJ1atyfHg8K2mXMfqs+O0Xr3ZsklXUe2djkVecRjX7tqhVl6wtJtI\nPMKitvmulMn2gi428ESCdD/X2zIFcU5jsvs6ktnJjjgkNA6gREmy2sS60zcV\nQfCJDosg1TZHXd+OLqK3QkX7D8RMzAaf4Wy5Tw9jFR+3wOWZy+suSxJ0uHph\nMlpV\r\n=wmv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC0t7s6LZSqOLhBwt4uEBlRUZdBza+/YBbHDzEBSPeLgIhAKn+Wtdm+xv/JIuqjFciuNHwutILbL0V+Pkt7xVFjpK0"}]},"_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-snackbar_0.26.0-canary.b9d35b69.0_1641407197225_0.1831270187364804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.2afff08e.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/snackbar":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.05db65ec0.0","@material/rtl":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-3iz5uyskzFZbhoCFSOubRVZtvJqaNhuCzQ2vjfbrc/R1ttU/gtjlI9mUArMjUm4AywaqS1GXpF5Nko7VCU/VLA==","shasum":"9f0951af47e105c3d5c14dba16b03d7a2d0849db","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.2afff08e.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12urCRA9TVsSAnZWagAAJgAP/1abACcmz/vKRa5qOv5M\n6Rp5FfFfMA8WaTJ5pA+HWJnCu1q+D0jyFj8nH/UusYD3MdLMCEUQLMYBx/PB\nSiPVMAHRt8l0M6cgcrEcPC5BWbI6ebeBq3LzvZ8IlJBW8Qig7vhnbDycewN3\n1glzwOfs1cM4MGTgSWKKO5inDEgqrFSWQCV/t3xrKdkoJNs2rJsmKDuv2owH\njNpSXdJ7nhrpkmdX1vOO3IN1F++WWra+3rrsQTXJRo7Gs4yHzqi5Noud+p8E\nSWszagDitm2pkwq3lOsqg4Z0Yizv9Kt2sXfpexEziyAsKUAo73Y+xU/JOKEz\n6qy4T9qR1aDeMpl6RiCetSeCPhKzCednLOrQNKAflDYOHgxjDndneU4VKVG5\nHpxOrAmYo3Giq/APd33G51EI6489ivJATohli6whMV6oBxXggkRyW7dhVYwA\np+PWlaJ4CroWg4qEVCJrT6iioi2pz9o1dku1X6OD6MvouB2jjWN3KaynwEiz\nfpXBQgCJiv+xqVgpsh3X7MkQBXY06V9fFkZZj6jOI4+seJqW6twJGmi+H4do\nwb6eGj0364jREdEusLrAwK+XB0JDFPcFO26BmwyDic8pAujTpLsu7tTfjDSE\nlCnXvYUBgN1j+0AuKY5ylB6/cjSWDo5HyepAGccfp2dbEJMRv8d75j5xeFLN\n+tQp\r\n=B4R9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2Y1mlBaRpwUVJvyfaZlHXpznL/ZI0ivlR2I921dpiPAiAl0JZHnfFC6icH7lhYWcmXnT8XwatAegg9iFoas9+Cqw=="}]},"_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-snackbar_0.26.0-canary.2afff08e.0_1641507754999_0.1366487592244634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.893fc857.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/snackbar":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.6ca8b8f85.0","@material/rtl":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-V2Qfaix+ZZm8PDBkJG5hxTUs6G1E1zTaF7+1AGK/klV6wkyAZiyHl6ZbySXcrQHWjPJw45AIuOcC8F1taNojdw==","shasum":"e76372018cb229107f82d3e53742b3c690f82ca5","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.893fc857.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IwrCRA9TVsSAnZWagAAZ0EP/AwQaYj/2gAzVpkoBSq5\n/5q8AyIiUSgblvZTMYNjAZTYrxudApizMs+307KSyruQPrcYqnErrMO2Uzay\natKp7rm3Knob4MvvcZqk0zznkhiCQbMuYUacqjGoJwTQ20oPnHmVldXzUyKy\n3WADmK4LKebTpIFQVJszDIcrkq96Z1ECMYijIOYrqfyznnEEkjwO/5c4zI2F\nmCRQy27uZAwdJp5b3RTy7MQBKVNtp6e+O0vOYockOkUS1fwki59PteCcGLEi\nEc3ScR9T+9qewkDqEMzSWI/osRftE448mNZicJp0NhQgg1NxvjFPiTDXi/Eo\nxZ7Gq7whU3ZNqlFpB9bVfwELuusQCwF8mbAg1bKiRT13jGyKq3BfQPBjFGHM\nyYgHRA3kVj+In2GfEnPRG3Ro+MLgRbHLy30/M9B+BtqKUqAqaNAhKzd6J4g/\n3tVC0RKdEckQJ+3f8SCowNe2iOcy2EavGnSifSkdq+V8emny2dgJYcbzWrHu\nMXgS6uywIhKJWWKehDuOjmsvhC31RcZR3HJXIA88AkGrEbMDnJk0c0KEtDra\nWyhtxicBZJCwGJ4TNQ6yy2LjBZigwyyCZZPcNCICxkPdJW1Zce9A+Buu0Xny\nFGbYTJi5HdmdS6BJEFg9v17kR2xzNpaVkOGf33EcQU/Kvk88LxIYXA+G2W6r\nYLuW\r\n=mnNW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEztDBS4O/xxoxUcgZ591mx3smRq8dMQ6s1x/g4j2QvBAiEA/dV0anKQCps9rknMzVnfWVGG39jQCX0rcaq9R9pXMII="}]},"_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-snackbar_0.26.0-canary.893fc857.0_1641581611491_0.5202025315314729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.69ba13b7.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/snackbar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-JdKFpTHv+9ZacEYacT9G4dZLvWCJDLfTuDRrF96KCqgjxadrY47WBaI6w8IND5Gup3IGFery/UTfcKeSBGEZNQ==","shasum":"c5faefa60aa50077887a138bf74106bb720c81f8","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.69ba13b7.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9iCRA9TVsSAnZWagAAUw4QAKMyYdIMYBNpnnPZDPQB\nKlNAq+O9HWF8tD6wArj9cInqhQqui87nOLv30zazwwZbzT7mzAmiMywx1yY0\nAVPnrdOo++xd5Q+zu17guoxKR6uFWXnDX6jvLo/znX/Jslv0/w1e3J9ZFUhy\ncpFpJ/QaYhlXsu+HED2iSHOuRWUeKEROG5hyDSkHPGKCIFjM/DSPTU+UUSR0\nAhR1D7PP38U8D3aRCwU47WCcqdrW/Wjmagw3bQKn3DWJdA5eszPbiJEKwY3D\ngYkkD3PLasig+WFTphKUmvO/nmE3lUWIrd57GVPhZp2UrWOf5FH6e2DkurXw\nKTa8jtwFXOe5HTQSCZQ7w2ax3o5A6a1pEu2CqIF5ttBtdMbrfMXIfJSXpQeX\n5UVwGRj5kP+UW+Byr+H4R0VmFiKE/iKLKepw+Gar1/MZU1urHkb6qNip3QWS\nzn3VTjR15SmU/d3L3nh5j3X6Xz44YQyNveevYYQfEzG1V4NpzzOz1dDGr4HX\nMUPc8N7eOzccea1MMfTC6IumOHMjDmiERupe27PJQ5nWo53qu/n3vudG07/A\nFoT3Ejp85IqLnBMJfCTiJA/Z9WYJePj7xd0S1XuvDQ+56nZc7zCBympN9QU2\n/Qh+VlKL6oBBsybx15u9Cn1YUL2TCeuRyAWJsxW9d6H6MGch47F3lG+yc+Gh\nq6yl\r\n=HvTL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFj5JUecEIUaGpRzS2RGUd7OAOEyrc+lmlj3aXxScdjEAiEAsr2ZVsDa8+7RkbjJBP7/tm4jMzQUnrZxPmUdQraiiOA="}]},"_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-snackbar_0.26.0-canary.69ba13b7.0_1642631010346_0.018799862667551626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-snackbar","version":"0.26.0-canary.0af8ade5.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/snackbar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-snackbar@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-JGZyOJBPkAEYzfvv7LlisMrfrk1UEcJZpWtTCXcPofbvoyIvsPS/P9/rJpqNow4SHCecDi966fogoURfswn3iQ==","shasum":"56455a546e743642b68d19a2454c1324f32d489c","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0-canary.0af8ade5.0.tgz","fileCount":16,"unpackedSize":68045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZd/CRA9TVsSAnZWagAA9HUP/3DJXA5/NLjcf7nFIOzY\nHLPEcGUNykZZSEP4enppQ359ocr+P6yArI0usJ98ubj2HaI1wBAzl9nYhjdO\nf7VjgX+1q0GUvhb7DWWTEBXY617OruY2ef0onYMyMfT0pjzY7ktmClHKQgXa\nN10FF0b7uPEqV/9A+J2iPjrUMfuIoUmyGmiPM5fF0zmCn9lMnCVodhNqNbtj\nBuW71wlaVHHvhYsfgbNxQwHIIhzrcGRkVxXKXPSQgnL2qOr8EskRUXyEXaPP\nKeNVcglOvcR1TqkOAFKc2p4RWjMP7pGizCi9okwqNQtWEr1yagqGq4YQbDJE\nFIegQ7fgiBuQzLjMSdl0i04D3UhFimRja1h8R0c0KqM/Jy4nD3/BLL674sb5\nTWjQmsAGJ1kyz9kZA1GlRqvIEs5t5RJUVznKPwpk37lG78rT0XUHV4EM0Upb\nEru1QX7MnQW0FUcMi/GCan/j0Z9kL73m4ZoIG9gKCB9DgkxAQR2dFn6ltMhj\nSSLaozFG4yI5cgZZHxmBKQQ/Vu9Wp5VdmDmoKceuI8H+Jg+9P/gpXEbpyN1f\ntwVdS60YOBI4tOXYVt3sjWwU6fd8FBk6XjF0rB2Q3wo9urnS9mDZoM1kAGyw\nqHBDHLFybH87f7SPr8Fmv4PDMWo6l3fCfu/3o0IGEqGdwdA0s173jaJ3/AXs\nmwz6\r\n=Sjpo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4j4z5qctFEfOcJCss0Bp6o22M7Yvh+rfFpFtzuZozvAiEA/D4o6Px7wTA1D4vT/DXoftJ7xMLpfbyRml1pPU7gtZc="}]},"_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-snackbar_0.26.0-canary.0af8ade5.0_1644271487190_0.203648279409532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-snackbar","version":"0.26.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/snackbar":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0","@material/rtl":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-SatCseKvk1DfFbLlNlWVs+UCIIu1ymmB+76aHPNjMt9wSxkpixF+IL8O6dKOr6/V/+VdmdAGRw1BtwI/+PII3Q==","shasum":"9b31d3ffd1b3a2ce9fcd947aad36882145498e6d","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.0.tgz","fileCount":16,"unpackedSize":72659,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6tRG41Hg2a0R1+c/pgjxp65wWozaijowD8nN9ctYboAIgQbBTgjqNCDkXXDDQzLvRied5susozHcu0UMGS0bUVRc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBGg//TIuavSTO8PpJqlXobLR+L2zZ4ipfBIJLzy0EyBdiWEh+h0YN\r\ni35j6MTjJz5xBZy8dWW+fNFB0KVVoTkPzq3fielxv8/XxQZsrGKfACSdCWAR\r\nsl5cwiemXPbwFsken2pmmRcpvZ/hxlgGo4zJZ1FSzsEH6aPnvuYePBdKg4DK\r\nUKGkeYac4z8j+cb/P0PLfNfAdQ9xP/f2TKinCBXQRz0KCj3tyi9T573P4Pxq\r\n3mAfUlRi+hHtOpoRW3ScCCaXYojWoRPf96IiQbuekb/21pbgRgY5nnuPhUzq\r\nk+LVYOI/yVXkbHA0+Ib4FBmt2wr1hxPsX7nJcWxi4EYyw+bha0XNh2CQoLzp\r\nTpLvhIn3gyO5rs1TFHQ7n1nYQJw0rLXXvm5ZnFnETO/n5ity73Er6fzl6KIK\r\ny6uL/QugPVl6jMxY28d6AaPgTxNOtmtqCUkMSdl6A1qOfz4H7jsCkSFMgJux\r\nImZ87BNP810G9ejWpKmcNojqWGrAewkTQDp1jrdZk7HShymG/sgIjsKw2GXO\r\niJaKDk3UfFoVSIHuDatVxBCAYO3XufzM0ELgTicdqy+zJgjm+K1071xtECR7\r\nlQszoEFHLh0Tv6iZ56QPLzAJI6/rbIrmq8nlB1LC3Ik9d/x+D0DvOFuS3EAH\r\nb8d3rFq/wvpZnd29pmS7HqgGHUALunOmHbw=\r\n=VtTl\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-snackbar_0.26.0_1651599028736_0.5714760115756876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-snackbar","version":"0.26.1","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/snackbar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-933enXy1hxO769muJ2D2q8FtT7cnrlpOvpVZ2a6j2hapZi55o26Qvlna+PxjUYPM695n+7dR6R5+4zOzbYP03Q==","shasum":"44cc17d1bc951e9dfba0cee539f7c903943d4b9e","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.26.1.tgz","fileCount":16,"unpackedSize":72830,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/cX65PIq7zZCcrDccSqyarnJpsKtyKQ3C5bT7fw0mHAiAJzVxBXds6tbLP2cHkcfGy5ntNOIWDuOQOl82KKk+FMg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXoxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCyw/5AJOWYV7hXlAaZoNq8LN5RYifQqyYmEoXd6ityyZkJhHCPOwQ\r\njlXVDZZ9ZGSrEH9RuFDwGNwj2vC5qmq7DpqJDQgUa1b9JFH4Vh481bJa3XpN\r\nQDMlU1tWe8D4hm/DjqUurZzeQ3qt3IwiIPZIWzNjWerTOLlIHNYjXxrLSVXz\r\n4KSk8FD4NEJfVVU5XCoSuhLadWdqgna7j9Xf08bLmPe+wzoJvmulZLXXPLOv\r\nsPGdQi8XVcDKPl1TfZPxro7z4Ri+rXTXfxDFvYnP44GnnIUqdzWNzrxton84\r\nuNWpJg200TRgAxb8yeUC1J1t97Ed25dFqJe0HLihk7Bz3uYVbs1rB+ea3rSI\r\nmXq1+Dal80+jkdA74T6QU+pF5IFk7LZR2qNaQEoPvNFyPZeXaluERoik51iY\r\njRPsakKgfwNST2Ae9l+R/rRN/1mVScWO1VAV1m5TD3h9/7iznIt8xJU2Y1xq\r\nJ8tp38Er7TKnNWd5/ZI/rPvif8tZvgBtz2ERTth7n3b50WTIok+vRhWAE9MT\r\nvPkzkMljkKw+gf3b54GiNbrWv8JAGzM1VpvnQ+SL1V/ADjABloHGDzqMiQ5C\r\nW11ehCe9AY4fWXNYs6MvBjXv331pvWLqOGPQk2r4EhkKYBwg27NAdXG674iT\r\nycSnNTnEV7bwdi32eXyk5o/Sff5xOYoewjc=\r\n=sCVv\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-snackbar_0.26.1_1652128305761_0.5525444546829421"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-snackbar","version":"0.27.0","description":"Material Design snackbar web component","keywords":["material design","web components","snackbar"],"main":"mwc-snackbar.js","module":"mwc-snackbar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/snackbar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/snackbar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/feature-targeting":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-snackbar.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-snackbar@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-D9xhae4MiUwhHJxXaNzucmOutXVS/02CVnuCpzV2uDCLnY4oTaiZNDa+YBxheZnNKTTSm5yrshOnsRIQO6hgPw==","shasum":"fb0bfc6e6a0ebb22b811b46edb781340b79d3ceb","tarball":"https://registry.npmjs.org/@material/mwc-snackbar/-/mwc-snackbar-0.27.0.tgz","fileCount":16,"unpackedSize":72830,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNpeW0KsIX3klj0WbYJXUgttGRfnjIhKdfKFt/9Bn+lwIgFLUsCBzrF9Km9ZvFJegxJc6N0mhf95wBTobeR0hZuaY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrT7hAAiEU0eaeNiGnYw/bFrUwmAit32rUoDywaNkYmmPIZIi1vUV/p\r\nrTiM2MMYja7IRH/m+/JEot5OWG8qeTgkWzgvn1U1Vh1maaU4aALP1W7w7VIO\r\nn0RiqfOqiAVKez/aswn1M1jW81yMzgOoUjEctXA+i3Z8SvhUOdUN6kr5pxa7\r\nWVK47cw/vYvWUawibe+wa/XsGSomvD7Fw8g/CTpSar4NSnsP1nZxTVoMY5qX\r\nVzbSxiNPJ1YpQB2z+MPabjPWNr/gDLxDSWcCQK6LvTjnY8ZZ1406M7MAfVkC\r\nXWnBXE8zJqBWMyERyqd0bIjvQbKsU0vpikctDXsA+TYJlvMd+wW1uQ4v7OSB\r\nyKhPZRRlbnMAhrVorzFjUufL5FuX2kb9Wbn60HnRhqrTBL+NjkCwCI8R3QxG\r\n+41fIIfh7moD0zZoP5lygxEX95ovauGKjtZHjcJlLoNBaRBtC9+pPFBFCK89\r\n0kor2wUpwFbT/Swp1ghDZpZ+tAqS+1ambgXbW2AfWXGqqyXqNpS+pbga35C0\r\nAJlCUiKSdlb0SJsCigEtqZyrOa3jm8s94LDaecMhSAa9FpnIIIPS4XFuJ4v/\r\nQd5wzSJFQr4UH789aYAIZ/hV7tk6sU0g8PfxmWaz5P+0T8Mpxk+iGN+eaeJY\r\nXZjkEcgeYylcYz6awlV4rPO8ZKuCGerw4XE=\r\n=hEGn\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-snackbar_0.27.0_1660331520867_0.01219493860319365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-06-05T22:20:14.205Z","0.6.0":"2019-06-05T22:20:14.485Z","modified":"2024-04-04T18:56:41.280Z","0.7.0":"2019-08-27T21:23:44.605Z","0.7.1":"2019-08-28T02:54:21.993Z","0.8.0":"2019-09-04T00:04:27.423Z","0.9.0":"2019-09-27T01:36:09.996Z","0.9.1":"2019-09-30T21:04:58.536Z","0.10.0":"2019-10-11T23:28:16.166Z","0.11.0":"2019-11-26T21:49:26.984Z","0.11.1":"2019-11-27T00:26:30.088Z","0.12.0":"2019-12-17T23:47:51.774Z","0.13.0":"2020-02-04T04:46:31.750Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:12.752Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:46.360Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:15.896Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:38.703Z","0.14.0-canary.960e214f.0":"2020-02-29T03:08:56.767Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:33.465Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:49.901Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:44.163Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:39.364Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:02.605Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:29.203Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:18.894Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:04.828Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:06.416Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:07.234Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:26.947Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:40.824Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:10.427Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:50.307Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:21.951Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:40.159Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:50.520Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:46.124Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:02.659Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:14.795Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:37.481Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:45.740Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:34.055Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:14.074Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:10.349Z","0.14.0":"2020-03-19T21:28:33.754Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:47.118Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:01.615Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:42.576Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:20.549Z","0.14.1":"2020-03-23T17:57:31.540Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:40.883Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:27.678Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:42:58.431Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:47.004Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:22:53.968Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:15.403Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:11.588Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:17.303Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:04.462Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:31.111Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:31.886Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:32.209Z","0.15.0-canary.9b676354.0":"2020-04-03T20:29:51.213Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:00.491Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:29.159Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:41.450Z","0.15.0-canary.8d352305.0":"2020-04-07T21:41:40.887Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:17.106Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:20.788Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:33.185Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:21.183Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:24:58.208Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:42.036Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:22.380Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:33.574Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:07.367Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:40:52.995Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:56:51.425Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:15.005Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:04.752Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:02.838Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:10.354Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:06.946Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:33:54.153Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:17.619Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:07.693Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:43.444Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:05.169Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:28.222Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:45.358Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:32.628Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:44.034Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:49.624Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:40:51.717Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:49.028Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:03.842Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:01.034Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:30.177Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:35.525Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:35.126Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:33.314Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:17:51.189Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:04.118Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:16.522Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:00.026Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:34.361Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:44:51.101Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:40.727Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:18.292Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:35:49.745Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:27.183Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:20.798Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:43.754Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:31:47.739Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:11:56.196Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:34.170Z","0.15.0":"2020-05-05T22:36:04.335Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:17.352Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:31.261Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:05.914Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:22.192Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:30.879Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:29:49.141Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:28.345Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:04:54.658Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:38.692Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:08.469Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:43.925Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:01.694Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:09.229Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:26.004Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:00.538Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:11.939Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:28.439Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:40.035Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:21.756Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:25.652Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:22.409Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:40.880Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:07.034Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:13.699Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:23.077Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:02.680Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:36.557Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:13.173Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:07.430Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:06.065Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:36.795Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:25.273Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:43:54.334Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:06.433Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:03.725Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:02:58.248Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:18.074Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:14:48.677Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:26.962Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:00.742Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:26.407Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:37.132Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:21.247Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:35.176Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:56:55.963Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:25.912Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:37.293Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:20:50.394Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:12.129Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:26.266Z","0.16.0-canary.51552859.0":"2020-06-10T00:07:50.405Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:31.318Z","0.16.0-canary.be138b01.0":"2020-06-10T20:48:53.746Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:01.856Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:30.372Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:26.413Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:30.289Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:40.345Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:23.340Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:33.688Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:31.444Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:31.932Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:47.132Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:38:56.312Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:09.586Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:45.066Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:04:59.983Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:09.717Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:29:05.693Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:03.289Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:10.074Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:37.832Z","0.16.1":"2020-06-30T21:14:40.976Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:43:59.224Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:43:55.461Z","0.17.0":"2020-07-01T19:44:17.887Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:14.393Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:20.073Z","0.17.2":"2020-07-02T05:58:10.533Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:09.767Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:19.295Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:22:58.495Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:10.458Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:23.780Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:33.766Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:18.893Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:05.899Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:09.947Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:52:44.720Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:37.245Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:19.668Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:39.097Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:12.340Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:40.417Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:24.842Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:45:51.792Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:17.230Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:41.579Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:42:57.162Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:17.127Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:44.799Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:40.953Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:28.391Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:29.114Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:46.709Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:09.073Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:11.954Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:38.899Z","0.18.0-canary.1f082191.0":"2020-07-24T19:15:55.273Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:08.964Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:21.913Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:38.940Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:14:57.706Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:15.573Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:15.871Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:26.334Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:13.586Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:41.667Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:04.504Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:03:56.965Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:22.886Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:37.578Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:19.264Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:10:51.276Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:01.106Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:30.599Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:00:54.247Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:28.807Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:19.303Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:23.038Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:06.442Z","0.18.0":"2020-08-03T21:24:13.499Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:38.137Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:17:48.781Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:31.423Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:43.094Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:09.828Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:08.314Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:34.007Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:08.755Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:29.482Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:39.273Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:14.044Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:10.985Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:41.591Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:28.885Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:24:55.645Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:11.809Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:17.462Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:06.069Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:19.177Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:07:49.802Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:15.378Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:07.576Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:08:46.763Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:24.137Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:15:51.184Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:30.744Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:38.159Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:34:47.458Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:33:46.280Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:11.458Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:15:51.260Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:19.144Z","0.19.0-canary.f208201e.0":"2020-08-24T19:02:58.337Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:30.201Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:36:51.494Z","0.19.0-canary.34012082.0":"2020-08-27T19:47:57.612Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:00.483Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:26:53.317Z","0.19.0-canary.697e3879.0":"2020-09-02T00:12:54.202Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:02.714Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:20.428Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:52:50.089Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:10:55.772Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:17.253Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:20.586Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:39.698Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:21.644Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:40:45.128Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:35:59.188Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:02.744Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:26:58.943Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:17.521Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:33:57.316Z","0.19.0-canary.3babab12.0":"2020-09-11T02:36:51.990Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:03.487Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:13.347Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:04.030Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:17.350Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:34.653Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:01.658Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:36.041Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:17.857Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:20.979Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:12.038Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:28.187Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:03:53.719Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:06.099Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:01.691Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:12.411Z","0.19.0-canary.347110f1.0":"2020-09-28T16:49:56.177Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:00:58.856Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:37:54.199Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:35.234Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:10.904Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:39.657Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:26:51.617Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:09.956Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:28.522Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:19.170Z","0.19.0":"2020-10-07T22:33:15.753Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:29.553Z","0.19.1":"2020-10-08T23:05:49.782Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:06:45.231Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:06.365Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:21:57.514Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:05.699Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:37.591Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:13.711Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:12.898Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:00.299Z","0.20.0-canary.65787913.0":"2020-10-19T18:50:42.474Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:23:59.837Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:38.509Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:20:47.873Z","0.20.0-canary.32961593.0":"2020-10-28T00:38:52.102Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:43.613Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:16.728Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:22.994Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:21.184Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:36.449Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:30.166Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:36.346Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:38.096Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:23:51.530Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:41:49.406Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:29.802Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:13.875Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:23:42.439Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:23.478Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:30.553Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:51:54.056Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:27.080Z","0.20.0-canary.761027ff.0":"2020-11-18T22:13:42.563Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:39.632Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:21.488Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:09:55.841Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:22.080Z","0.20.0-canary.72092360.0":"2020-11-24T04:17:54.815Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:05.898Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:00.935Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:26:53.075Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:35.176Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:11.645Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:06:54.529Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:02.624Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:28.884Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:39.074Z","0.20.0":"2020-12-03T22:28:41.127Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:33.814Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:36.069Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:44.397Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:32.167Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:29.064Z","0.21.0-canary.41f77000.0":"2020-12-18T00:34:51.346Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:25.800Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:23.420Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:15.994Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:00.376Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:07:46.929Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:03:46.909Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:13.997Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:43.139Z","0.21.0-canary.269eed01.0":"2021-01-13T21:44:57.674Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:34.719Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:14.850Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:01.336Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:08:56.720Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:12.455Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:15.301Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:03.567Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:51:58.398Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:33.120Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:09.775Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:20.671Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:22.924Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:17.056Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:14.941Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:12.390Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:09.192Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:29.311Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:37.226Z","0.21.0-canary.c8797192.0":"2021-01-23T00:06:59.914Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:13.977Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:39:45.289Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:05:57.472Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:10.252Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:16:53.081Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:23.935Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:21.106Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:11.580Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:24.239Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:33:49.430Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:00.130Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:19.884Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:50:44.556Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:44:28.260Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:39.225Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:42:46.961Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:04.939Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:35.611Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:17:45.616Z","0.21.0-canary.d84df029.0":"2021-02-16T19:07:34.984Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:11.065Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:40.117Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:37:39.213Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:01.482Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:18:59.708Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:14:41.232Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:09:56.078Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:00:53.110Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:08.709Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:14.329Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:46:39.340Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:10:45.598Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:18.526Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:21:55.657Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:26:52.233Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:17.412Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:18.940Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:16.589Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:40:55.525Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:00.568Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:40.386Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:27.822Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:00.831Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:01.331Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:26.432Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:06.405Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:31.906Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:32.150Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:44.283Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:04.367Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:07.579Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:35.189Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:19.540Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:38:45.124Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:20.384Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:03.093Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:19:46.931Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:42.300Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:01.345Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:38.405Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:16.330Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:08.201Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:22.888Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:01.271Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:08.994Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:41:52.694Z","0.21.0-canary.852f873c.0":"2021-04-02T05:21:57.085Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:10.223Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:49:47.471Z","0.21.0-canary.583644a6.0":"2021-04-05T17:50:50.527Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:03.707Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:26.180Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:35.539Z","0.21.0-canary.e539904c.0":"2021-04-08T18:01:50.176Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:07.348Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:21.036Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:12.682Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:38:57.921Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:34.702Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:03.748Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:37.000Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:07.138Z","0.21.0-canary.11977cac.0":"2021-04-16T00:57:50.043Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:50:46.150Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:21.393Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:52:55.338Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:12.335Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:04.897Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:15.216Z","0.21.0":"2021-04-30T23:58:02.638Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:02.650Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:33:57.747Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:21.838Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:23.543Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:40.123Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:05.822Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:58:53.300Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:40.691Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:35.561Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:02.822Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:28:56.122Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:13.106Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:20.311Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:02.400Z","0.22.0-canary.4af17446.0":"2021-05-11T18:45:49.618Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:22.415Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:13.720Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:07.327Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:09.138Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:08:57.861Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:06.961Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:38.945Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:12.809Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:31:46.792Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:23.252Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:08.922Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:42.826Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:39:57.245Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:41.065Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:42.846Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:12.408Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:31.159Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:01:57.167Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:07.057Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:09.619Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:11.191Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:13:48.910Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:10:45.061Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:05.601Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:30:53.686Z","0.22.0-canary.227a4614.0":"2021-05-27T16:02:58.797Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:44:58.397Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:32:51.929Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:54:47.586Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:14.645Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:49:54.419Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:21.693Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:48:50.775Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:05.076Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:35.311Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:27.098Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:19.665Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:55:51.136Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:08:51.974Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:46:45.531Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:00.823Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:26.181Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:33:47.333Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:07.315Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:00.896Z","0.22.0-canary.d53edeb6.0":"2021-07-07T16:59:57.336Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:16.672Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:30.404Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:30.721Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:17.964Z","0.22.0-canary.cb42f5bd.0":"2021-07-13T18:19:41.162Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:41:50.056Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:25.714Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:20.803Z","0.22.0":"2021-07-14T22:31:53.935Z","0.22.1":"2021-07-14T22:52:45.394Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:53:48.740Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:19.583Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:27.530Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:25.365Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:03:48.520Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:30.831Z","0.23.0-canary.c180db74.0":"2021-07-16T17:24:46.969Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:00.572Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:35.653Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:11:53.495Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:22.912Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:53:51.853Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:17.263Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:25.417Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:22.887Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:25.993Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:22.856Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:43.256Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:42.811Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:15:50.608Z","0.23.0-canary.e0693475.0":"2021-07-23T18:55:59.163Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:01.783Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:36.612Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:34.405Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:43:49.559Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:52:51.432Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:06.430Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:08.747Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:25:50.658Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:32.503Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:30.384Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:32.590Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:12.433Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:24.639Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:39.854Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:13.232Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:35.407Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:15.471Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:38.349Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:45.828Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:26.236Z","0.23.0-canary.3f47ae57.0":"2021-08-12T17:59:49.063Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:23:59.451Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:44.653Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:08.392Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:05.130Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:08.889Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:00.805Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:05.307Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:05.576Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:15.425Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:25:57.301Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:26.576Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:40.736Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:49:59.857Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:40.493Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:23.902Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:43:47.252Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:25:59.668Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:40.004Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:31.205Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:40.159Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:30.357Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:19.956Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:18:43.092Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:17.170Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:30.850Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:15:56.540Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:10.349Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:19.663Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:34.176Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:07.881Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:43.484Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:29.385Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:04.286Z","0.23.0":"2021-09-13T21:35:40.582Z","0.24.0-canary.9830d665.0":"2021-09-13T21:36:53.146Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:31:56.338Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:03.647Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:00.681Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:38.095Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:12:56.986Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:35.087Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:21.822Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:31:57.985Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:27.652Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:22.883Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:38:58.202Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:36.245Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:00.447Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:45.053Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:34.095Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:28.995Z","0.25.0":"2021-09-21T02:53:00.220Z","0.26.0-canary.6be1a13e.0":"2021-09-21T02:53:07.604Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:01.666Z","0.25.1":"2021-09-21T03:12:38.812Z","0.26.0-canary.ae060177.0":"2021-09-21T14:37:57.175Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:07.163Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:35.607Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:26.653Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:30:58.552Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:12.872Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:21.630Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:41.505Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:38.885Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:43.691Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:06.739Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:24.854Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:06.003Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:12.413Z","0.25.2":"2021-10-11T23:18:29.295Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:19.038Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:55.822Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:27.872Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:20.298Z","0.25.3":"2021-10-21T17:55:38.986Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:14.638Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:45.324Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:35.991Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:16.254Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:41.754Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:23.437Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:49.166Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:03:52.483Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:45.674Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:18.064Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:09:51.306Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:35:47.016Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:24.667Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:40.709Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:21.931Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:26:37.395Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:35.182Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:31.608Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:30.469Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:04:47.332Z","0.26.0":"2022-05-03T17:30:28.933Z","0.26.1":"2022-05-09T20:31:45.920Z","0.27.0":"2022-08-12T19:12:01.082Z"},"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 snackbar web component","license":"Apache-2.0","readme":"# `<mwc-snackbar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-snackbar.svg)](https://www.npmjs.com/package/@material/mwc-snackbar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nSnackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/snackbar/images/action_button.png)\n\n[Material Design Guidelines: Snackbars](https://material.io/design/components/snackbars.html)\n\n[Demo](https://material-components.github.io/material-web/demos/snackbar/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-snackbar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/snackbar/images/standard.png)\n\n```html\n<mwc-snackbar id=\"photoErrorSnackbar\"\n              labelText=\"Can't send photo. Retry in 5 seconds.\">\n</mwc-snackbar>\n\n<script type=\"module\">\n  import '@material/mwc-snackbar/mwc-snackbar.js';\n  const snackbar = document.querySelector('#photoErrorSnackbar');\n  sendPhoto.then(...).catch(() => snackbar.show());\n</script>\n```\n\n### Optional action and dismiss button\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/snackbar/images/action_and_dismiss.png)\n\n```html\n<mwc-snackbar labelText=\"Can't send photo. Retry in 5 seconds.\">\n  <mwc-button slot=\"action\">RETRY</mwc-button>\n  <mwc-icon-button icon=\"close\" slot=\"dismiss\"></mwc-icon-button>\n</mwc-snackbar>\n```\n\n### Custom action button color\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/snackbar/images/custom_action_color.png)\n\n```css\nmwc-snackbar {\n  --mdc-snackbar-action-color: #64dc17;\n}\n```\n\n## Variants\n\n### Stacked\n\nAction buttons with long text should be positioned below the label instead of\nalongside it. Set the `stacked` attribute or property to enable this layout.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/snackbar/images/stacked.png)\n\n### Leading\n\nBy default, snackbars are centered horizontally within the viewport. On larger\nscreens, they can optionally be displayed on the leading edge of the screen\n(the left side in LTR, or the right side in RTL). Set the `leading`\nattribute or property to enable this layout.\n\n## API\n\n### Slots\n\n| Name      | Description\n| --------- | -----------\n| `action`  | Optional `<mwc-button>` which closes the snackbar with reason `'action'`.\n| `dismiss` | Optional `<mwc-icon-button>` which closes the snackbar with reason `'dismiss'`.\n\n### Properties/Attributes\n\n| Name                | Type                  | Description\n| ------------------- | --------------------- |------------\n| `open`              | `boolean`             | Whether the snackbar is currently open.\n| `timeoutMs`         | `number`              | Automatic dismiss timeout in milliseconds. Value must be between `4000` and `10000`  (or `-1` to disable the timeout completely) or an error will be thrown. Defaults to `5000` (5 seconds).\n| `closeOnEscape`     | `boolean`             | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to `false`.\n| `labelText`         | `string`              | The text content of the label element.\n| `stacked`           | `boolean`             | Enables the *stacked* layout (see above).\n| `leading`           | `boolean`             | Enables the *leading* layout (see above).\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `show() => void`   | Opens the snackbar.\n| `close(reason: string = '') => void` | Closes the snackbar, optionally with the specified reason indicating why it was closed.\n\n### Events\n\n| Name                  | Detail              | Description\n| --------------------- | ------------------- | -----------\n| `MDCSnackbar:opening` | `{}`                | Indicates when the snackbar begins its opening animation.\n| `MDCSnackbar:opened`  | `{}`                | Indicates when the snackbar finishes its opening animation.\n| `MDCSnackbar:closing` | `{reason?: string}` | Indicates when the snackbar begins its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n| `MDCSnackbar:closed`  | `{reason?: string}` | Indicates when the snackbar finishes its closing animation. `reason` contains the reason why the snackbar closed (`'dismiss'`, `'action'`, or a custom `string` via the `close` method).\n\n### CSS Custom Properties\n\n| Name                          | Default | Description\n| ----------------------------- | ------- |------------\n| `--mdc-snackbar-action-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/snackbar/images/color_bb86fc.png) `#bb86fc` | Color of the action button text.\n\n#### Global CSS Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-typography-body2-<PROPERTY>`  | Styles the typography of a snackbar.\n\n## Additional references\n\n- [MDC Web Snackbars](https://material.io/develop/web/components/snackbars/)\n","readmeFilename":"README.md","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/snackbar"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"keywords":["material design","web components","snackbar"]}